IE8,jquery 轮播。使用 javascript 更改项目宽度

问题描述 投票:0回答:1

我在使用 jQuery 制作轮播时遇到了问题。它适用于 Chrome、FF、IE7 和 IE9。 IE8是唯一有问题的。

轮播具有并排浮动的项目,当单击某个项目时,其宽度会扩展以显示内容。如果再次单击,它会缩回到原来的宽度。

问题是,当我单击其中一个项目(item1)时,它不起作用。当我用IE的开发工具查看它时,我可以清楚地看到它实际上是打开的。它只是不呈现更改。然后,如果我单击 item1 (item2) 右侧的元素,item1 会跳转到扩展宽度而不产生动画。如果我再次单击 item1,它会缩回到原始宽度,这就是问题发生的地方。 Item2 应该在 item1 旁边,但它仍然位于右侧很远。

我用一个比我原来的项目简单得多的例子复制了这个问题,因为它相当大。 完整的 html/css/js 源代码粘贴在下面。

如何复制(首先使用其他浏览器进行测试,看看它应该如何工作):

  1. 向右滚动窗格,以便您可以看到第三个(黄色)和第四个(灰色)元素
  2. 单击黄色元素
  3. 单击灰色元素
  4. 再次单击黄色元素

现在您应该在黄色元素的右侧看到黑色(项目父元素的颜色)。如果向右滚动,您可以看到那里的灰色元素。

我的问题是,以前有人遇到过这个问题吗?有解决办法吗?

来源:

<!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> 
jquery internet-explorer-8 css-float
1个回答
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。它看起来仍然不完美,但我可以忍受。至少现在可以用了。

© www.soinside.com 2019 - 2024. All rights reserved.