当我在 IE7 中进行测试时,菜单在第一次鼠标悬停时会抖动并稍微改变位置。此外,当将鼠标悬停在包含子菜单的菜单项上时,菜单会再次抖动。我认为这两个问题都与 IE7 hasLayout 有关,但我不确定。
有没有办法在我的菜单和子菜单标签上确保 IE7 的 css 中的 hasLayout ?或者,是否在 IE7 中以某种方式插入了文本节点?谢谢您的帮助。
当我在 IE7 中进行测试时,菜单在第一次鼠标悬停时会抖动并稍微改变位置。此外,当将鼠标悬停在包含子菜单的菜单项上时,菜单会再次抖动。我认为这两个问题都与 IE7 hasLayout 有关,但我不确定。
有没有办法在我的菜单和子菜单标签上确保 IE7 的 css 中的 hasLayout ?或者,是否在 IE7 中以某种方式插入了文本节点?谢谢您的帮助。
确实你是对的。似乎这是IE7 的 hasLayout 问题。
我更改了一个 CSS 属性。
#nav {
margin: 70px 0px 0px -15px;
padding: 0px;
list-style: none;
font-size: 14px;
position: relative;
}
#nav li a {
display: inline-block; /* changed it to inline-block for IE compatibility */
width: 195px; /* declared width since it's now inline-block */
padding: 0 0 0 15px; /* total width 210px with padding */
text-decoration: none;
line-height:20px; /* vertical center with line-height instead */
color: #262626;
height: 20px;
}
.subnav {
margin: -26px 0 0 ;
padding: 0;
list-style: none;
position: absolute;
display: none;
left:196px;
background: #201d1e;
width: 325px;
}
/* same idea as (#nav li a) */
.subnav a {
display: inline-block;
color: #fff !important;
padding: 0 0 0 15px;
width: 310px;
line-height:20px;
height: 20px;
}
子菜单呈现比现代浏览器高几个像素,但 .subnav 上的 -26px 可以使用 IE7 样式表进行调整。我认为它接近边缘顶部:IE7 为 -10px。希望这行得通。