IE7中的菜单在悬停时会出现抖动。HasLayout问题？

Question

当我在IE7中测试时，菜单在第一次鼠标悬停时会抖动，并且会稍微改变位置。此外，当鼠标悬停在包含子菜单的菜单项上时，菜单会再次抖动。我认为这两个问题都与IE7 hasLayout有关，但我不确定。

JSFiddle

有没有办法确保在我的菜单和子菜单标签上的IE7的css中有hasLayout？或者，在IE7中是否插入了文本节点？谢谢你的帮助。

Answer 1

确实，你是对的。看起来是个hasLayout issue with IE7。

我更改了一个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;
}

该子菜单呈现的像素比现代浏览器高出几个像素，但是可以使用IE7样式表调整.subnav上的-26px。我认为它接近毛利-顶部：-10px的IE7。希望这能行得通。

http://jsfiddle.net/marioluevanos/VAuYx/11/