IE7 尴尬的列表间距答案

【问题标题】：IE7 awkward list spacingIE7 尴尬的列表间距
【发布时间】：2012-09-05 08:08:08
【问题描述】：

我有一个从列表构建的大菜单。

它在我尝试过的所有现代浏览器和 IE8 中都能正确显示，但是在 IE7 中，列表项似乎被赋予了大量不同大小的边距，具体取决于列表项的大小（参见图片比较下面）：

不幸的是，IE7 中的调试工具不是最佳的，我很难找出问题的根源。源代码放在这里有点长，所以我做了一个 JSfiddle 供大家观赏。

谁能看出这个神秘的间距是从哪里来的，我怎么能把它说清楚？

【问题讨论】：

【解决方案1】：

在 IE7 中，<ul> 标签继承了 line-height : 1.5em，在 ie7 中禁用它可以消除烦人的间距。 Updated fiddle

这种情况是罪魁祸首

ul {
    /* line-height: 1.5em; */
    list-style-position: outside;
}

附加

好的，我明白你所说的白色间隙是什么意思了。这看起来像是它（惊喜）那些烦人的ie7“功能”之一。我只是通过使用 hack 解决了它

ul li, ul li a {
    /* Needed in ie7 to stop list items expanding vertically
    *line-height:1.2em;
}

与

* html ul li a {
    height:15px;
}

或

ul#map > li > a.map-item {
    height:auto;
    *height:15px;
}

更好的方法是创建一个仅限 IE7 的样式表并将其声明为标准，而不是依赖于 hack。

【讨论】：

感谢您解决了一些间距问题。它们仍然存在与打开的子菜单下方的列表项以及在其上方具有较大间距的顶级列表项之间的间距问题。
我想你误解了第二个问题。查看打开的ul.child 之后的列表项（JSfiddle 中的“沟通障碍”），并看到“沟通障碍”和“健康安全与保障”之间的巨大差距
你说得对，我确实误解了第二部分。在答案中查看更多信息，不要认为我能提供更多帮助。
感谢 David，我将 IE 特定类应用于 <html> 元素，这样我就可以像 .ie7 .otherClass 那样定位特定版本的 IE。我还发现overflow:hidden 有效。 “沟通障碍”（ul.child 元素之后的第一个元素）上仍然存在空间问题，并认为这与浮动有关，但我会将其标记为已解决，因为您提供了很大的帮助。非常感谢

【解决方案2】：

您是否尝试过添加 CSS 以将所有浏览器的所有样式重置为相同？

通过包含重置 CSS 文件，例如：http://meyerweb.com/eric/tools/css/reset/ 可能有助于解决您的问题。

【讨论】：