Strange problem: CSS-based menu behaves differently in IE "compatibility" mode
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 i开发者_开发百科n 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>
I need a version of the code below that does NOT exhibit the symptoms I describe.
SOLUTION
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}
Out of curiosity, why not just disable compatability mode with the x-ua-compatible meta tag?
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
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:
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" >
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.
精彩评论