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

Question

我有一个下拉列表，我正试图在IE7中工作。在其他错误中，让我击败的是悬停时的锚点，而不是将背景推到完全填充高度。它似乎保持在它的尺寸和最终的ul。我试过扩大ul和li的高度，但这似乎不起作用。在所有其他浏览器中正常工作：

http://jsfiddle.net/gzLVR/2/

你应该看到什么：悬停时的锚标记应该在底部扩展50px（根据css #menu > ul > li:hover > a { padding-bottom:50px; }。执行此扩展，但背景颜色似乎没有推到主播的边缘。

我做错了什么？

Answer 1

IE7不支持:hover标记以外的项目<a>。由于:hover上有<li>，因此无法在IE7中使用。

当您将鼠标悬停时，您需要添加一些javascript来向.hover添加<li>课程，然后调整您的css以包含它：

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

[编辑] 看起来只有当IE7在quirksmode中呈现时才会出现这种情况。如果您使用严格的文档类型，则应该能够:hover上使用<li>

Answer 2

您是否尝试过将锚更改为

display:inline-block; 
zoom:1;

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

Answer 3

我认为触发hasLayout会解决它;你可以用这样的somthin做到这一点：

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

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

我还建议对使用<i></i>的部分使用伪元素，这样就不会在HTML中出现不必要的标记。

Answer 4

我自己最终找到了解决方案。每个li的锚点默认设置为包围它的内容（显示：内联？），并且将显示设置为内联块有点危险，因为它在IE7中的行为有些不可预测。

只需将锚点设置为display：block，就可以让它在IE7中呈现自身的尺寸，这样你就可以将它简单地包裹在其内容中。因此，它可能会在悬停时影响所需的填充。

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