특정 시간에 올바르게 렌더링되지 않는 높이

Question

처음으로이 페이지에서 슬라이드를로드하고 방문하면 http://www.blythestoves.co.uk/new 정확한 높이가 렌더링되지 않습니다. 일부 정보가 잘립니다. 슬라이드 2 (Ecomaster BB1)로 이동하여 에어 플로우 다이얼의 이미지 아래에 보증에 대한 정보가 있어야합니다. 페이지가 마지막 텍스트 블록을 렌더링하지 않습니다.

이상한 부분이 있습니다. 페이지를 새로 고치면 아무 일도 일어나지 않지만 주소 표시 줄로 가서 거기를 클릭하고 다시 돌아 오면 페이지가 정확하게 올린 상태에서 정확하게로드됩니다.

나는 정말로 이것을 이해하지 못하고 이미 너무 많은 시간을 보냈습니다. 어떤 도움이라도 정말 좋을 것입니다.

감사합니다.

Answer 1

주요 문제

는 이미지가 로딩을 시작하여 이미지 크기를 얻을되지 않은 전에 웹킷 브라우저가 문서 준비 이벤트 해고한다는 것입니다. 따라서 이미지 크기를 CSS 또는 인라인에 포함 시키면 :

<img src="images/blythe-ecomaster-bb2.jpg" style="width:1228px;height:678px;" /> 

슬라이더 높이가 적절하게 조정됩니다.

또한 슬라이더 초기화의 너비 옵션이 더 이상 사용되지 않으므로 css를 사용하여 슬라이더 크기 만 설정할 수 있습니다.

width : 1228,   // Override the default CSS width 

Answer 2

바이올린에서 분리하지 않고 내가 확실히 말할 수 없다,하지만 당신은 명시 적으로하지 resizeContents : false과에 말 때문에 나는 그것을 크기를 조정하지 추측 것 :

$('#slider').anythingSlider({ 
           width : 1228,   // Override the default CSS width 
           resizeContents : false, 
           navigationFormatter : formatText, 
           autoPlay : false, 
           easing: 'easeInOutExpo' 

         }); 

는 거기에서 그것을 얻고 그것을 할 수있다 작업. 그렇지 않다면 우리를 바이올린으로 설정하십시오.)

Answer 3

파이어 폭스와 크롬에서 저에게 맞나요? 그것은 단지 IE에서 나타나는 것입니다 오버 플로우 CSS 문제가있을 수 있습니다. 앤드류