Question

我似乎遇到了IE7的一个奇怪问题。

如果您访问以下网址http://tinyurl.com/3qrbhn4，并将鼠标悬停在Chrome，Firefox和IE8标题图片顶部的主导航栏上方，则会将鼠标悬停在导航栏上时显示的子导航元素（例如，将鼠标悬停在会议上）似乎与父LI正确对齐。但是，如果您尝试将鼠标悬停在IE7中的主导航上，则子节点会出现一个像素。

如果您检查嵌套的UL，即#mainNav ul ul，您会发现它位于父UL的绝对位置，左边的值为0。

如果我给左边的左值：1px，它在IE7中正确排列，但在Chrome / FF / IE8中中断。

我不确定为什么会发生这种情况，而且我目前的父级UL（#mainNav ul）相对定位，所以我不确定为什么IE7显示subnav UL会有什么不同。我知道我可以用IE浏览器“修复”这个并且只强制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 {  }

Answer 1

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

IE7嵌套绝对定位<ul>内部相对定位<ul>问题</ul> </ul>

1 个答案: