IE7尴尬的列表间距

Question

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

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

不幸的是，IE7中的调试工具并不是最佳选择，我很难确定问题出在哪里。 源代码在这里发布时有点冗长，所以我制作了一个JSfiddle以便您欣赏。

查看源代码和工作演示

谁能看到这个神秘的间隔来自何处，我该如何直截了当？

Answer 1

在IE7中， <ul>标签继承了line-height : 1.5em ，在ie7中禁用它会消除烦人的空格。 更新的小提琴

这种情况是元凶

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

额外

好的，我明白您对空白的意思。 这看起来像是（令人惊讶的）那些烦人的ie7“功能”之一。 我只是通过黑客来解决

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中没有空格的小提琴

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

Answer 2

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

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