Question

当鼠标在项目上滚动时，我有这个使用addClass（'hover'）的导航。这种方法很好，除了在IE7中调用addClass函数时，float:left的所有元素都停止浮动，页面完全失去了它的结构。

这是我的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');行时，浮动的元素不会破坏。

是否有人熟悉这个IE7问题？

谢谢你们

Answer 1

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

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

IE7 - jquery addClass（）打破了浮动元素

1 个答案: