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

【问题标题】：Odd CSS behavior in IE7 unordered listIE7 无序列表中的奇怪 CSS 行为
【发布时间】：2011-12-14 02:44:26
【问题描述】：

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

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

我做错了什么？

【问题讨论】：

【解决方案1】：

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

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

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

[编辑] 看来这仅在 IE7 以 quirksmode 呈现时才成立。如果您使用的是严格的文档类型，您应该可以在 <li> 上使用 :hover

【讨论】：

我会调查这个，但我已经通过严格使用 css 检查了锚点是否在悬停时展开，并且 IE 调试器（在 IE9 上，在 IE7 浏览器和文档模式下）向我显示它确实按应有的方式扩展。似乎真的是背景并不想将其元素推向新的维度。
我不认为这是真的 - 我刚刚在 IE7 上尝试了LI:hover，它工作正常。

【解决方案2】：

我认为触发器hasLayout 会修复它；你可以像这样使用somthin：

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

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

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

【讨论】：

【解决方案3】：

我最终自己找到了解决方案。每个 li 的锚点默认设置为环绕其内容（display:inline？），将显示设置为 inline-block 有点危险，因为它在 IE7 中的行为有些不可预测。

通过简单地将锚点设置为 display:block，您允许它在 IE7 中呈现自身的尺寸，因此您可以将其与简单地环绕其内容的方式分开。因此，它可能会在悬停时影响所需的填充。

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

【讨论】：

【解决方案4】：

你有没有试过把锚改成

display:inline-block; 
zoom:1;

zoom 应该只对 IE7 是必需的，它会触发 'hasLayout'

【讨论】：