【发布时间】：2011-10-25 01:30:42
【问题描述】：
我似乎遇到了一个奇怪的 IE7 问题。
如果您访问以下 URL，http://tinyurl.com/3qrbhn4，并将鼠标悬停在顶部的主导航上，在 Chrome、Firefox 和 IE8 的标题图像正上方，则在您将鼠标悬停在导航元素 (例如，将鼠标悬停在会议上）似乎与父 LI 正确对齐。但是，如果您尝试将鼠标悬停在 IE7 中的主导航上，则子导航会显示相差一个像素。
如果您检查嵌套的 UL，即 #mainNav ul ul，您会注意到它绝对位于父 UL 内部，左值为 0。
如果我给它一个left值：1px，但是，它在IE7中正确排列，但在Chrome/FF/IE8中中断。
我不确定为什么会发生这种情况，而且我目前将父 UL (#mainNav ul) 定位相对，所以我不确定为什么 IE7 显示子导航 UL 的方式会有所不同。我知道我可以通过 IE hack 来“修复”这个问题，并且只强制 IE7 显示左侧值为 1px 的 subnav ul，但如果可能的话，我想避免这条路线。
有人可以帮忙吗？如果我提供了足够的信息，请告诉我！我列出了相关导航元素的 CSS：
/* NAVIGATION *********************************************************************************************** */
#mainNav { position: relative; width: 951px; margin: 0 auto; padding: 15px 0; z-index: 3; }
#mainNav ul { line-height: 100%; height: 35px; margin: 0; padding: 0; font-size: 20px; width: 951px; }
#mainNav ul li { line-height: 100%; list-style: none; float: left; text-transform: uppercase; height: 100%; position: relative; display: block; }
#mainNav ul li a { line-height: 0; height: 22px; border: 1px solid transparent; text-decoration: none; padding: 7px 15px 5px; position:relative; display: block; }
#mainNav ul li a:hover { }
#mainNav ul li.hover a { }
#mainNav ul li a.current { }
#mainNav ul li.lastItem { }
#mainNav ul ul { display: none; z-index:2; position: absolute; top: 35px; left: 0px; padding: 5px 0 10px; width: 200px; height: auto; -moz-box-shadow: 3px 3px 3px #444; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.5); }
#mainNav ul li.current ul { left: 1px; }
#mainNav ul li.hover ul li { background-position: 10px 8px; background-repeat: no-repeat; }
#mainNav ul li.hover ul li.hover { background-color: #baceda; background-position: 10px -20px; }
#mainNav ul li ul li { float: none; }
#mainNav ul li ul li a { background: none; line-height: 1; font-size: 15px; padding: 3px 30px 0; }
#mainNav ul li ul li.hover a { }
#mainNav ul li ul li a.current { }
【问题讨论】：
-
您的时间值多少钱？只需使用 IE7 hack 就可以了。
-
当然，我可以走 hack 路线，但我真的很想了解这里发生的事情，以防将来遇到更严重的问题。
-
IE7 现在在全球范围内的使用率
-
相信我，我梦想有一天我所在的公司会实现这一点。目前，它仍然是我们支持的浏览器。
标签： html css internet-explorer-7