奇怪的问题：基于CSS的菜单在IE“兼容性”中表现不同模式
更新：
我已经为此添加了赏金。为了声明它，我需要下面的代码版本，该版本不会表现出我描述的症状。
这是一个简单的测试用例。在关闭兼容模式的 Chrome、Firefox 和 IE8 中，这可以按预期工作。但是，打开兼容模式（切换收费 -> 兼容性视图）时，某些菜单块显示和显示的方式会出现问题。隐藏。
要查看问题：
将示例保存到文件，然后通过 Web 浏览器查看它（请注意，如果您只是从文件加载它，则无法打开兼容性视图 - 它必须从 Web 服务器传递）。
将鼠标从“这里”移动到“那里”再到“到处”，然后向下移动，使“否”突出显示，并显示第三级菜单。将鼠标移至左侧。仅显示顶部菜单。
现在重复这些步骤。当您第二次点击“Everywhere”时，会显示第三级菜单块，但其中没有任何内容。
有什么方法可以防止这种情况发生，即使在兼容性视图中也是如此？
样本：
<!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>
Update:
I've added a bounty to this. To claim it, I need a version of the code below that does NOT exhibit the symptoms I describe.
Here's a simple test case. In Chrome, Firefox, and IE8 with compatibility mode off, this works as expected. However, turn on compatibility mode (toggle Tolls->Compatibility View) there's a glitch with the way some of the menu block show & hide.
To see the issue:
Save the example to a file, and view it via web browser (note that if you simply load it from a file, you can't turn on compatibility view - it has to be delivered from a web server).
Move the mouse from "Here" to "There" to "Everywhere", then down so that "No" is highlighted, and the 3rd level menu is displayed. Move the mouse out to the left. Only the top menu is displayed.
Now repeat the steps. When you hit "Everywhere" the 2nd time, the 3rd level menu block is shows, but with nothing in it.
Is there any way to prevent this from happening, even in Compatibility View?
Sample:
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
解决方案
http://jsbin.com/oketat/
EMENDED CSS
SOLUTION
http://jsbin.com/oketat/
EMENDED CSS
出于好奇，为什么不直接使用 x-ua 兼容元标记禁用兼容模式呢？
Out of curiosity, why not just disable compatability mode with the x-ua-compatible meta tag?
导航在 IE9 中对我来说按预期工作。在浏览器模式：IE7 我可以重新创建您所描述的错误。基本上，您需要一个可在 IE7+ 中工作的基于 CSS 的多级下拉导航？
您能否查看其他有效的现有示例并将您的导航项目应用于其中？
http://www.stunicholls.com/menu/hover_drop_1.html
http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html
The nav works as expected in IE9 for me. In Browser Mode:IE7 i can re-create the error you are describing. Basically you need a CSS based multi-level drop-down nav that works in IE7+?
Can you just check out other existing examples that work and apply your nav items to that?
http://www.stunicholls.com/menu/hover_drop_1.html
http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html
某些条件会导致 IE-7 以 IE-5 模式呈现。不建议将此（如下）作为一般做法，但如果您想防止这种情况，您可以尝试以下操作：
Certain conditions cause IE-7 to render in IE-5 mode. This (below) isn't recommended as a general practice, but if you want to prevent that, you can try this:
你最初的问题是 IE 是如何/为什么糟糕的......我不会进入那个地狱，但我会告诉你，在“早期”版本中触发布局/显示错误相对简单。不过，IE9 正朝着正确的方向发展。
至于工作代码，我无法确切地告诉您在这种特定情况下做错了什么，但它可能是一个或多个边缘情况错误和 IE 在某些元素上不舒服的样式的组合。
我从头开始重建了菜单，因为这样我就清楚地知道我在做什么/介绍每一步......这只是大量的经验和搜索/阅读那些罕见的 IE 错误才能做到这一点，这很无聊。
工作代码
http://jsfiddle.net/r52D6/69/
免责声明：这没有经过广泛的测试，但除非在怪异模式下，否则应该可以正常工作，当然它也可以在真实的浏览器中工作。
顺便说一句，您可以使用 IE 的开发人员工具 (f12) 在本地 PC 上激活兼容模式。我还确保在开始之前可以在 jsfiddles 环境中重现旧代码中的错误。请记住，jsfiddle 有一个规范化脚本，并非所有实际应用的样式都在我自己的代码中，但我相信您可以处理它。
Your original question is how/why does IE suck... I won't go into that hellhole but I'll tell you that it is relatively simple to trigger layout/display bugs in the 'earlier' versions. IE9 is going into the right direction though.
As for working code, I can't exactly tell what you did wrong in this specific case, but it's likely a combination of one or more edge case bugs and styles IE isn't comfortable with on certain elements.
I rebuilt the menu from scratch since that way I know exactly what I am doing/introducing with every step... It's just lots of experience and searching/reading about those rare IE bugs to be able to do this, it's boring.
WORKING CODE
http://jsfiddle.net/r52D6/69/
Disclaimer: This is not extensively tested but should work fine unless in quirks mode, ofcourse it also works in real browsers.
BTW you can activate compatibility mode on your local PC by using IE's developer tool (f12). I also made sure that the bug in the old code could be reproduced in jsfiddles environment before starting. Keep in mind that jsfiddle has a normalizing script and not all actual applied styles are in my own code, but I trust you can handle that.