高度在特定時間無法正確顯示

第一次加載並訪問此頁面上的某些幻燈片http://www.blythestoves.co.uk/new正確的高度不會呈現。一些信息被切斷。轉到幻燈片2（Ecomaster BB1），並在氣流撥號的圖像下方，應該有一些保修信息。該頁面不呈現最後的文本塊。高度在特定時間無法正確顯示

這是奇怪的部分。如果刷新頁面沒有任何反應，但是如果您轉到地址欄並在其中單擊並再次按回車，則頁面將正確加載，高度都正確。

我真的不明白，已經花了太多的時間在這。任何幫助都會非常棒。

謝謝。

來源

2011-11-19 Fourleaves

的主要問題是，WebKit瀏覽器關火文檔準備事件的圖像加載啓動，因此尚未獲得的圖像尺寸前。所以，如果您在CSS或者內嵌圖像尺寸：

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

然後滑塊高度將適當大小。

此外，滑塊初始化中的寬度選項已被棄用，因此您只能使用css設置滑塊尺寸。所以，你可以刪除此行，因爲它沒有做任何事情：

width : 1228,   // Override the default CSS width

來源

2011-11-20 20:21:11 Mottie

這當然解決了這個問題。謝謝fudgey。有關最終固定結果，請參閱blythestoves.com – Fourleaves

如果沒有小提琴隔離我不能告訴是肯定的，但我想這不是因爲調整你明確告訴它不要與resizeContents : false：

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

         });

把那離開那裏，它可能工作。如果沒有，請給我們一個小提琴;）

來源

2011-11-19 20:22:25 Sinetheta

'resizeContents：FALSE' 是有點誤導。這實際上會自動調整內容的大小，但我不得不在整個幻燈片上設置高度。這將使較小的幻燈片看起來很奇怪，在底部有很多空白。 – Fourleaves

'resizeContents'選項會將'width：100％; height：100％'添加到幻燈片內部的直接孤兒（即它找到的第一個元素，如果它是唯一的直接元素）;所以包裝圖像和標題的div會得到該css應用，但不包含圖像或標題。只有圖像或iframe /嵌入式視頻的幻燈片會得到該css應用並調整大小以適合幻燈片尺寸。如果幻燈片中立即有多個元素，那麼它將不會對元素執行任何操作。呃..我希望這已經夠清楚了。 – Mottie

適用於我的Firefox和Chrome？它可能是一個溢出的CSS問題，它只出現在IE中。

安德魯

來源

2011-11-19 20:34:15 Andrew

因此，您可以在氣流控制的圖像下看到兩列文字？它在Firefox中適用於我，但Chrome與我在Safari中遇到的問題相同。也許它與Webkit有關。 – Fourleaves

高度在特定時間無法正確顯示

回答

相關問題