我在使用 jQuery 制作轮播时遇到了问题。它适用于 Chrome、FF、IE7 和 IE9。 IE8 是唯一有问题的浏览器。
轮播中的项目并排 float ，当单击某个项目时，其宽度会扩展以显示内容。如果再次单击，它会缩回到原来的宽度。
问题是，当我单击其中一个项目(item1)时，它不起作用。当我用IE的开发工具查看它时，我可以清楚地看到它实际上是打开的。它只是不呈现更改。然后，如果我单击 item1 (item2) 右侧的元素，item1 会跳转到扩展宽度而不产生动画。如果我再次单击 item1，它会缩回到原始宽度，这就是问题发生的地方。 Item2 应该位于 item1 旁边，但它仍然位于右侧很远的地方。
我用一个比我原来的项目简单得多的例子复制了这个问题，因为它相当大。 可以在这里找到:http://sevanteri.com/testing/ie/scrollthing/ 完整的 html/css/js 源代码也粘贴在下面。
如何复制(首先使用其他浏览器进行测试，看看它应该如何工作):
- 向右滚动 Pane ，以便您可以看到第三个(黄色)和第四个(灰色)元素
- 点击黄色元素
- 点击灰色元素
- 再次点击黄色元素
现在您应该在黄色元素的右侧看到黑色(项目父元素的颜色)。如果向右滚动，您可以看到那里的灰色元素。
我的问题是，以前有人遇到过这个问题吗？有解决办法吗？
来源:
<!DOCTYPE html>
<html>
<head><title>ie testing</title>
<style type="text/css">
#test {height: 150px; background-color: black; overflow:auto;position:relative;width:700px;border: 1px solid black;}
#pane {width: 5000px;position:relative;}
.item {width: 240px; height: 150px; float:left; overflow: hidden; position:relative;}
#item1 {background-color: red;}
#item2 {background-color: blue;}
#item3 {background-color: yellow;}
#item4 {background-color: gray;}
#item5 {background-color: pink;}
#item6 {background-color: white;}
.item-content { height: 150px; width: 2px;} /* this didn't seem to affect anything */
</style>
</head>
<body>
<div id="test">
<div id="pane">
<div id="item1" class="item"><div class="item-content"> </div></div>
<div id="item2" class="item"><div class="item-content"> </div></div>
<div id="item3" class="item"><div class="item-content"> </div></div>
<div id="item4" class="item"><div class="item-content"> </div></div>
<div id="item5" class="item"><div class="item-content"> </div></div>
<div id="item6" class="item"><div class="item-content"> </div></div>
<div style="clear:both; float:none;"> </div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
t = $("#test");
$pane = $("#pane");
$items = $(".item", $pane);
startw = $($items[0]).width();
$(".item", $pane).click(function() {
$t = $(this);
if ($t.width() == startw) {
$t.animate({width:700}, 200);
} else {
$t.animate({width:startw}, 200);
}
});
asd1 = $("#item1");
asd2 = $("#item2");
asd3 = $("#item3");
asd4 = $("#item4");
asd5 = $("#item5");
asd6 = $("#item6");
</script>
</body>
</html>
最佳答案
deadeye536 在 facepunch.com 找到了某种解决方案.
Looks like IE8 is failing to redraw.
This is a very ugly solution, but it's the only one I could come up with.
$(".item", $pane).click(function() {
$t = $(this);
if ($t.width() == startw) {
$t.animate({width:700}, 200);
} else {
$t.animate({width:startw}, 200);
}
window.setTimeout(function() {
if ($.browser.msie&&$.browser.version.slice(0,1)=="8") {
$('.item').each(function() {
this.style.cssText = this.style.cssText;
});
}
}, 205);
});
所以它基本上重置了项目的 CSS。它看起来仍然不完美，但我可以忍受。至少现在可以了。
关于jquery - IE8、jquery 轮播。使用 javascript 更改项目宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7012042/