高度在特定时间无法正确显示

第一次加载并访问此页面上的某些幻灯片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

高度在特定时间无法正确显示

回答

相关问题