Question

鼠标悬停时， Internet Explorer 9.0.8 上的菜单大小会增加。我发现原因是元素divider正在使用属性overflow:hidden。

鼠标结束时为什么会影响元素？

这是代码的小提琴。我在第一个CSS样式中指出了问题所在。 http://jsfiddle.net/EF9Eg/4/

这是有问题的风格：

.floatingMenu li.divider{
    height: 1px;
    margin: 9px 1px;
    overflow:hidden;  /*PROBLEM INTERNET EXPLORER*/
    background-color: #E5E5E5;
    border-bottom: 1px solid #FFF;
}

如果我们摆脱overflow:hidden;一切正常。

Answer 1

它正在发生它似乎基于对IE的100％宽度部分的替代解释以及div定义该尺寸。

没有设置或最大宽度的div或ul中的100％宽度可以被解释为它嵌套的最大div的宽度，这似乎正在发生。如果删除100％宽度或对ul应用set或max-width，则会将其限制为该分层宽度。

这可能部分也是应用于ul的绝对定位的一个因素，因为它可能忽略相对定位的div的宽度高于其自身。

我相信this会进一步解释发生的事情。

Answer 2

当您从.floatingMenu li

移除宽度：100％时问题消失

溢出：隐藏;鼠标悬停在Internet Explorer上的奇怪行为

2 个答案: