html - IE7 尴尬的列表间距

Question

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

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

好浏览器和IE7的比较

不幸的是，IE7 中的调试工具不是最佳的，我很难弄清楚问题出在哪里。源代码在这里发布有点长，所以我制作了一个 JSfiddle 供您观看。

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

score 3 · Accepted Answer

在 IE7 中，<ul>标签继承了 a 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 的样式表并将其声明为标准，而不是依赖于 hack。

score 1 · Accepted Answer

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

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

2 回答 2