javascript - IE7 - jquery addClass() 打破 float 元素

Question

当鼠标滑过某个元素时，我有一个使用 addClass('hover') 的导航。这工作正常，除了在 IE7 中，当调用 addClass 函数时每个带有 float:left 的元素停止 float 并且页面完全失去其结构。

这是我的 JS:

_this.position_sub_menus = function(){
  $('#header #nav > ul > li').mouseenter(
    function(e){
     pos = $(this).offset();
     height = $(this).height();
     lvl2 = '#' + $(this).attr('id') + '-submenu'; 
      if( $(this).position().left > ($('#nav').width()/2)){
       pos.left = pos.left - $(lvl2).width() + $(this).width();
      }
     $(this).addClass('hover');
     $(lvl2).show();
     $(lvl2).css( { 'left' : (pos.left - 12) + 'px', 'top' : pos.top + height + 'px'});
    }
   );

这是中断元素的 CSS:

display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
position: relative;

它是来自 960 网格系统的 CSS。

当我注释掉 $(this).addClass('hover'); 行时， float 元素不会中断。

有人熟悉这个 IE7 问题吗？

谢谢大家

Answer 1

Rex M 可能在这里有所作为。如果您的悬停类添加任何填充、边距、填充或更改元素的宽度，那么它会使元素太大。有时，由于 box model bug，这些可能会在 IE 中发生。 .在 960gs 中，如果元素变得太长，那么它们将转到下一行。

如果这没有帮助，您能否给我们一个示例链接？