At some zoom levels, dropdown menu has transparent gaps in IE7
Please consider my stripped down code below that illustrates my issue.
If I run it in Firefox 7 or IE8, it works fine. However, when pressing F12 and entering the wonderful world of IE7, I'm experiencing gaps in my orange list at some zoom levels (so please use "ctrl+mouse wheel" when menu is extended to reproduce the bug).
The main annoyance there, excluding the aesthetic visual gap, is since my menu is defined as absolute, when the mouse stops on the gap my menu disappears.
Any suggestion on what is causing the problem?
Also what is the best way to handle it if an IE7 fix is required, in order that my menu remains exactly the same in other browsers?<!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>
You're experiencing this bug: http://www.brunildo.org/test/IEWlispace.php
As you can see, different combinations cause the problem, so there are various way to fix it.
Here's your original code: http://jsbin.com/itaxek
One possible fix is to move width: 200px; from ul li ul li to ul ul: http://jsbin.com/itaxek/2
加载中,请稍侯......
精彩评论