Flexslider图像在Firefox中非常轻微的错误运动

Question

我正在使用Flexslider,但我遇到了一些问题.

它实际上在演示中可见.这只发生在Firefox中,或者至少它不会出现在IE9或Chrome中.当您将浏览器的大小调整为大约400-500px宽并在最后两个图像(山丘和小鸟)之间切换时,如果仔细观察,您会发现图像实际上会大幅上下跳动大约一个像素开关.实际上,您可能需要多次尝试来调整窗口大小以复制它可能并不总是显示的行为,但它至少会占50%的时间.

这是非常小的我知道,但当我做一个1200px宽的滑块时,它是非常明显的.我花了几个小时追踪问题直到我发现它实际上是固有的.

然而,我发现当图像有标题(使用<p>标签)时,它们不会表现出这种行为.您可以使用firebug进行验证.

我的问题是:有谁知道p标签将采取什么措施来防止这种行为.很高兴能够强制它工作,但我想避免在标记中使用非语义空段落标记,如果我可以避免它.

Answer 1

我通过将以下代码添加到css来修复它.我不明白为什么,但它似乎需要在<li>标签之外(或在它们内部有高度？)的东西,以保持稳定.将列表样式更改为光盘也可以,但这看起来不太好.

.slides li:after {
content: ".";
position:absolute;
top:0;
left:0;
z-index:-1000;
}

编辑:实际上,如果top:0被替换bottom:0为代码效果稍好,因为当滑块部分偏离屏幕时奇怪的效果会回来.