Question

使用jQuery制作旋转木马时遇到了问题。它适用于Chrome，FF，IE7和IE9。 IE8是唯一有问题的人。

旋转木马具有并排浮动的物品，当点击一个项目时，其宽度会延长以显示内容。如果再次点击，它会缩回到原来的宽度。

问题是，当我点击其中一个项目（item1）时，它不起作用。当我用IE的开发工具看一下它时，我可以清楚地看到它实际上是开放的。它只是没有呈现变化。然后，如果我单击item1（item2）右侧的元素，item1将跳转到展开的宽度而不进行动画处理。如果我再次单击item1，它将缩回到原始宽度，这就是问题发生的地方。第2项应该在第1项旁边，它仍然在右边。

我用一个比原始项目简单得多的例子来复制这个问题，因为它非常大。它可以在这里找到：http://sevanteri.com/testing/ie/scrollthing/ 完整的html / css / js源也粘贴在较低的位置。

如何复制（首先使用其他浏览器测试它是如何工作的）：

向右滚动窗格，以便您可以看到第三个（黄色）和第四个（灰色）元素
点击黄色元素
点击灰色元素
再次点击黄色元素

现在你应该在黄色元素的右侧看到黑色（项目'父元素的颜色）。如果向右滚动，则可以看到那里的灰色元素。

我的问题是，以前是否有人遇到过这个问题并且有解决方案吗？

来源：

<!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>

Answer 1

deadeye536在facepunch.com找到的某种解决方案。

看起来IE8无法重绘。

这是一个非常难看的解决方案，但它是我唯一能想到的解决方案。

$(".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。它看起来仍然不完美，但我可以忍受。至少它现在有效。

IE8，jquery旋转木马。使用javascript更改项目宽度

1 个答案: