html - IE7 嵌套绝对定位 内相对定位 问题

Question

我似乎在使用 IE7 时遇到了一个奇怪的问题。

如果您访问以下网址，http://tinyurl.com/3qrbhn4 ，并将鼠标悬停在顶部的主导航上，在 Chrome、Firefox 和 IE8 中的标题图像的正上方，将鼠标悬停在导航元素上(例如，将鼠标悬停在 session 上)后显示的子导航似乎与父李。但是，如果您尝试在 IE7 中将鼠标悬停在主导航上，子导航会显示一个像素。

如果您检查嵌套的 UL，即 #mainNav ul ul，您会注意到它绝对位于父 UL 内部，左值为 0。

但是，如果我给它一个左值 left:1px，它在 IE7 中正确排列，但在 Chrome/FF/IE8 中中断。

我不确定为什么会这样，而且我目前的父 UL (#mainNav ul) 相对定位，所以我不确定为什么 IE7 显示子导航 UL 的方式会有所不同。我知道我可以用 IE hack 来“修复”这个问题，并强制 IE7 显示左值为 1px 的子导航，但我想尽可能避免走这条路。

有人可以帮忙吗？如果我提供了足够的信息，请告诉我!我列出了相关导航元素的 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 {  }

Answer 1

尝试将 #mainNav ul ul 从 left:1px 更改为 left:auto。