css - IE7 ul显示:none/block problem

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;}

and finally this is my MooTools:

var nav_divs = $$('.nav div');<p></p>

<p>for(i=0; i

</p><pre><code> nav_divs[i].onmouseover = function () {
     this.getElementsByTagName('ul')[0].style.display = 'block';
}
nav_divs[i].onmouseout = function () {
     this.getElementsByTagName('ul')[0].style.display = 'none';
}
</code></pre>

<p>}
</p>

在 Firefox、Opera、Safari Chrome 和 IE8 中一切正常，但在 IE7 中，当我在 div 上时，ul 不显示。

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

提前感谢您的任何建议。

Answer 1

我同意，这不是冒泡问题，它很可能与您应用到 ul 的 CSS 有关。

top: 0 和 left: 0，是否意味着在绝对元素上执行此操作？不知道，除非 ul 必须播种在视口(viewport)的左上角(然后 -50px 通过上面的 margin-top 会使它超出可视区域)。

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

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