Question

我对IE7有一个奇怪的问题。这是我的HTML：

          <div class="nav square">
            <div>
              <ul>
                <li><a href="#square" class="square_lk">[b] square</a></li>
                <li><a href="#history" class="history_lk">[b] history</a></li>
              </ul>
            </div>
          </div>

这是我的CSS：

.nav ul { 
position: absolute; margin-top: -50px; top: 0; left: 0; width: 100px; font-size: 10px !important; background-color: rgb(159,55,32); 
display: none;}

最后这是我的MooTools：

var nav_divs = $$('.nav div');

for(i=0; i

 nav_divs[i].onmouseover = function () {
     this.getElementsByTagName('ul')[0].style.display = 'block';
}
nav_divs[i].onmouseout = function () {
     this.getElementsByTagName('ul')[0].style.display = 'none';
}


}

在Firefox，Opera，Safari Chrome和IE8中都可以，但在IE7中，当我超过div时，ul不会显示。

我也尝试过一个简单的jQuery函数，但IE7中的错误仍然存在。

提前感谢任何建议。

Answer 1

我同意，这不是一个冒泡问题，它很可能与你申请ul的CSS有关。

top: 0和left: 0，它是否意味着在绝对元素上执行此操作？ dunno，除非必须在视口的左上方播种ul（然后通过上面的margin-top -50px将其放在可视区域之外）。

http://www.jsfiddle.net/uAAge/

通过从css类中删除top:和left:声明，它可以作为相对弹出窗口（在ie7，ff3和chrome中测试）。如果你现在需要抵消它以便它更好地定位在触发元素周围，请使用marginTop和marginLeft。

Answer 2

尝试display = ''而不是display = 'block'或display = 'none'。

Answer 3

听起来像个冒泡的问题。

http://www.quirksmode.org/js/events_order.html

Answer 4

您甚至没有使用MooTools的语法。如果愿意，请使用mouseenter / mouseleave代替mouseover / mouseout。

nav_divs.each(function(el){
  el.addEvents({
    mouseenter: function(){
      this.getElement('ul').setStyle('display', 'block');
    },
    mouseleave: function(){...}
  });
});

IE7 ul显示：无/阻塞问题

4 个答案: