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

Question

我有一个下拉列表，我正试图在 IE7 中使用它。在其他错误中，让我击败的是悬停时的 anchor 没有将背景推到完整的填充高度。它似乎停留在其 li 的维度之内，最终停留在 ul 的维度之内。我试过扩大 ul 和 li 的高度，但这似乎不起作用。在所有其他浏览器中正常工作:

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

您应该看到的内容:悬停时 anchor 标记应在底部扩展 50 像素(根据 css #menu > ul > li:hover > a { padding-bottom:50px; }。执行了此扩展，但背景颜色似乎没有推到 anchor 的边距。

我做错了什么？

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> 上