4

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

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

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

但是我发现,当图像有标题(使用<p>标签)时,它们不会表现出这种行为。您可以使用 firebug 验证这一点。

我的问题是:有谁知道 p 标签会做什么来防止这种行为。能够强制它工作真是太好了,但如果我可以避免的话,我想避免在标记中使用非语义的空段落标签。

4

1 回答 1

11

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

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

top:0编辑:实际上,如果将其替换为,则该代码的效果会稍好一些,bottom:0否则当滑块部分离开屏幕时会出现奇怪的效果。

于 2012-06-14T20:04:31.280 回答