jquery - 在 jquery 中移动带有文本的 div + array，IE 行为不端

Question

请在 Firefox、chrome、safari 等中查看以下网站 ( http://www.intra-interieur.be/www )。它工作正常。然后，在 IE 中打开它(7 或 8，无所谓)。它并没有真正起作用:-)。您可以查看任何您想要的来源，但重要的是这里。

我认为带有被替换文本的数组导致了其他问题(移动 div 无法正常运行)。

$('#menu ul li.home').addClass('active');

var msgs = [ "ga hier", "bekijk dit", "misschien dit", "of zelfs hier" ];
var msgs_length = msgs.length;

$("#menu ul li a").click(function () { 
     $('#menu ul li.active').removeClass('active');
     $(this).parent().addClass('active');
     $('.go', this).text("u bent hier");

     $("#menu ul li a").not(this).each(function(i) {
         $('.go', this).text(msgs[i % msgs_length]);
     });
});

还有菜单:

<div id="menu">
    <ul>
        <li class="home"><a href="#home" class="panel">home / <span class="go">u bent hier</span></a></li>
        <li class="clearfloats"></li>
        <li class="about"><a href="#about" class="panel">over intra / <span class="go">ga hier</span></a></li>
        <li class="clearfloats"></li>
        <li class="cases"><a href="#cases" class="panel">projecten / <span class="go">bekijk dit</span></a></li>
        <li class="clearfloats"></li>
        <li class="photos"><a href="#photos" class="panel">foto's / <span class="go">misschien dit</span></a></li>
        <li class="clearfloats"></li>
        <li class="contact"><a href="#contact" class="panel">contact / <span class="go">of zelfs hier<span></span></a></li>
    </ul>
</div>

有人看到问题了吗？我真的不明白为什么 IE 表现如此糟糕。当然，它是 IE，但是 :-)

Answer 1

对于初学者，不要 float 您的 LI 并使用“clearfloats”。实际上，根本不要设计您的 LI。

改为设置 A 标签的样式。使用width + margin-left, display:block 实现相同的外观。