Question

请考虑我在下面的精简代码，说明我的问题。

如果我在Firefox 7或IE8中运行它，它可以正常工作。然而，当按下F12并进入IE7的精彩世界时，我在一些缩放级别的橙色列表中遇到了空白（所以当菜单扩展时请使用“ctrl +鼠标滚轮”来重现错误）。

那里的主要烦恼，不包括审美视觉差距，因为我的菜单被定义为绝对，当鼠标停在间隙时我的菜单消失。

有关导致问题的原因有任何建议吗？如果需要IE7修复，那么处理它的最佳方法是什么，以便我的菜单在其他浏览器中保持完全相同？

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>IE 7 Menu Test</title>
    <style type="text/css">
      body {
        line-height: 1;
      }

      ul li {
        background: #A0A0A0;
      }

      ul li ul li {
        background: #FF9900;
        display: block;
        white-space: normal;
        width: 200px;
      }

      ul ul {
        position: absolute;
      }

      div ul ul,div ul li:hover ul ul,div ul ul li:hover ul ul
        {
        display: none;
      }

      div ul li:hover ul,div ul ul li:hover ul,div ul ul ul li:hover ul
        {
        display: block;
      }
    </style>
  </head>
<body>

  <div><ul><li>Menu
      <!-- drop down list -->
      <ul>
        <li>- One</li>
        <li>- Two</li>
        <li>- Three</li>
        <li>- Four</li>
      </ul><!-- end drop down list -->
  </li></ul></div>

</body></html>

Answer 1

您遇到此错误：http://www.brunildo.org/test/IEWlispace.php

正如您所看到的，不同的组合会导致问题，因此有多种方法可以解决问题。

以下是您的原始代码：http://jsbin.com/itaxek

一种可能的解决方法是将width: 200px;从ul li ul li移至ul ul：http://jsbin.com/itaxek/2

在某些缩放级别，下拉菜单在IE7中有透明的间隙

1 个答案: