IE7尴尬的列表间距

Question

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

它在我尝试的所有现代浏览器和IE8中都能正确显示，但在IE7中，列表项似乎会根据列表项的大小给出大量不同大小的边距（参见图像比较）下文）：

不幸的是，IE7中的调试工具并不是最佳的，我正在努力解决问题的来源。源代码有点冗长，所以我已经为你的观看乐趣做了一个JSfiddle。

View source code and working demo

任何人都可以看到这个神秘间距来自哪里，我怎样才能直截了当？

Answer 1

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

这种情况是罪魁祸首

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;
}

Fiddle with no spacing in IE7

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

Answer 2

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

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