移动div + jquery中的文本，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

对于初学者，不要浮动你的LI s和使用“clearfloats”。实际上，根本不要设计你的LI。

改变风格的A - 标签。使用width + margin-left,display:block来实现相同的外观。