IE7无序列表中的奇怪CSS行为

Question

我有一个下拉列表，我正在尝试使用IE7。 在其他错误中，让我击败的一个错误是悬停时的锚点没有将背景推到完整的填充高度。 它似乎保持在其li以及最终ul的范围内。 我尝试扩大ul和li的高度，但这似乎不起作用。 在所有其他浏览器中均可正常运行：

您应该看到的是：锚定标记在悬停时应在底部扩展50px（按照css #menu > ul > li:hover > a { padding-bottom:50px; } 。 background-color似乎并没有增加锚点的边缘。

我究竟做错了什么？

Answer 1

IE7在<a>标记以外的项目上不支持:hover 。 由于您将:hover放在<li>因此它在IE7中不起作用。

当您将鼠标悬停在<li>时，需要添加一些JavaScript来将.hover类添加到<li> ，然后调整css使其也包括在内：

#menu > ul > li:hover > a,
#menu > ul > li.hover > a{ 
    padding-bottom:50px; 
}

[编辑]看来这仅在IE7以quirksmode渲染时才成立。 如果您使用严格的doctype，则应该可以在<li>上使用:hover

Answer 2

您是否尝试过将锚点更改为

display:inline-block; 
zoom:1;

只有IE7才需要zoom ，它会触发“ hasLayout ”

Answer 3

我认为触发器hasLayout将解决该问题； 您可以使用somthin来做到这一点：

#menu > ul > li > a { display: inline-block;}

请注意，IE不支持:last-child 直至IE8 ，但是您可以使用:first-child 。

我还建议对使用<i></i>的部分使用伪元素，以免HTML中没有不必要的标记。

Answer 4

我最终自己找到了解决方案。 默认情况下，每个li的锚点都设置为环绕其内容（display：inline？），并且将显示设置为inline-block有点危险，因为它在IE7中的行为是无法预测的。

通过简单地将锚设置为display：block，就可以使其在IE7中具有自身的尺寸，因此您不必将其简单地包裹在其内容中即可。 因此，悬停时可能会影响所需的填充。

现在可以在IE7中使用： http : //jsfiddle.net/gzLVR/5/