Question

更新

我为此添加了赏金。要声明它，我需要一个下面的代码版本，它没有表现出我描述的症状。

这是一个简单的测试用例。在兼容模式关闭的Chrome，Firefox和IE8中，这可以正常工作。但是，打开兼容模式（切换Tolls-＆gt;兼容性视图），有一些菜单块显示＆amp;隐藏。

要查看问题：

将示例保存到文件中，并通过Web浏览器进行查看（请注意，如果只是从文件中加载它，则无法启用兼容性视图 - 必须从Web服务器传送它。）

将鼠标从“Here”移动到“There”到“Everywhere”，然后向下移动以突出显示“No”，并显示第3级菜单。将鼠标移至左侧。仅显示顶部菜单。

现在重复这些步骤。当您第二次点击“Everywhere”时，会显示第3级菜单块，但不显示任何内容。

有没有办法阻止这种情况发生，即使在兼容性视图中也是如此？

样品：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
   <title>test</title>
<style>
#navRaw, #navRaw ul{
   margin: 0;
   padding: 0;
   list-style-type: none;
   list-style-position: outside;
   position: relative;
   line-height: 26px;
}
#navRaw a{
   display: block;
   padding: 0px 5px;
   color: #000;
   text-decoration: none;
   background-color: silver;
      line-height: 28px !important;
}
#navRaw a:hover{
   background-color: #ccc;
   color: #fff;
}
#navRaw li{
   float: left;
   position: relative;
}
#navRaw ul{
   position: absolute;
   display: none;
   top: 28px;
}
#navRaw li ul a{
   width: 220px;
   height: auto;
   float: left;
}
#navRaw ul ul{top: auto;}
#navRaw li ul ul{
   left: 230px;
   margin: 0px 0 0 0px;
}
#navRaw li:hover ul ul, #navRaw li:hover ul ul ul, #navRaw li:hover ul ul ul ul{ display: none;}
#navRaw li:hover ul, #navRaw li li:hover ul, #navRaw li li li:hover ul, #navRaw li li li li:hover ul{ 
   display: block;
   border: 1px solid Black;
}
</style>
</head>
<body>
   <ul id="navRaw">
      <li><a href="#"><b>Here</b></a></li>
      <li><a href="#"><b>There</b></a></li>
      <li><a href="#"><b>Everywhere</b></a>
         <ul>
            <li><a href="#"><b>Yes</b></a></li>
            <li class="showsub"><a href="#"><b>No</b></a>
               <ul>
                  <li><a href="#"><b>Why</b></a></li>
                  <li><a href="#"><b>Why not</b></a></li>
               </ul>
            </li>
            <li class="menusep"><a href="#"><b>Perhaps</b></a></li>
         </ul>
      </li>
   </ul>
</body>
</html>

Answer 1

出于好奇，为什么不禁用兼容模式与x-ua兼容的元标记？

Answer 2

我需要一个不会出现症状的代码版本我描述了。

<强>解

http://jsbin.com/oketat/

EMENDED CSS

#navRaw li:hover > ul, #navRaw li li:hover ul, #navRaw li li li:hover ul, #navRaw li li li li:hover ul{ 
   display: block;
   border: 1px solid black;
}
#navRaw li:hover ul li ul li a {background-color:transparent}  
#navRaw li li:hover ul li a {background-color:silver !important}

Answer 3

导航按照预期在IE9中工作。在浏览器模式下：IE7我可以重新创建您描述的错误。基本上你需要一个基于CSS的多级下拉导航，适用于IE7 +？

您是否可以查看其他有效的示例并将导航项应用到该示例中？ http://www.stunicholls.com/menu/hover_drop_1.html

http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html

Answer 4

某些条件会导致IE-7以IE-5模式呈现。这个（下面）不建议作为一般做法，但如果你想阻止它，你可以试试这个：

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" >

Answer 5

你最初的问题是IE是如何/为什么糟透了...我不会进入那个地狱，但我会告诉你，在“早期”版本中触发布局/显示错误相对简单。 IE9正朝着正确的方向发展。

至于工作代码，我无法准确地告诉你在这个特定情况下你做错了什么，但它可能是一个或多个边缘案例错误的组合和IE在某些元素上不舒服的样式。

我从头开始重建菜单，因为我知道我正在做什么/每一步都在介绍...这只是很多经验和搜索/阅读那些罕见的IE错误才能做到这一点，这很无聊

工作代码

http://jsfiddle.net/r52D6/69/

免责声明：这项测试未经过广泛测试，但除非在怪癖模式下，否则应该可以正常使用，当然它也适用于真正的浏览器。

顺便说一下，您可以使用IE的开发人员工具（f12）在本地PC上激活兼容模式。我还确保在开始之前可以在jsfiddles环境中重现旧代码中的错误。请记住，jsfiddle有一个规范化脚本，并不是所有实际应用的样式都在我自己的代码中，但我相信你可以处理它。

奇怪的问题：基于CSS的菜单在IE“兼容性”模式下表现不同

5 个答案: