Html IE7列表间距

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

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

不幸的是，IE7中的调试工具并不是最理想的，我很难找出问题的根源。在这里发布的源代码有点长，因此我制作了一个JSFIDLE，以方便您查看

---

有人能看到这个神秘的间距是从哪里来的吗？我怎样才能把它说清楚呢？

在IE7中，

标记继承了一个

行高：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;
}

与

或


更好的方法是创建一个仅限IE7的样式表，并将其声明为标准，而不是依赖黑客攻击。
在IE7中，
标记继承了一个
行高：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;
}

与

或


更好的方法是创建一个仅限IE7的样式表，并将其声明为标准样式，而不是依赖黑客攻击。
您是否尝试添加CSS以将所有浏览器的所有样式重置为相同样式

通过包含重置CSS文件，例如：可能有助于解决您的问题。
您是否尝试添加CSS以将所有浏览器的所有样式重置为相同的样式

通过包含重置CSS文件，例如：可能有助于解决您的问题。
我在实时版本中使用重置。只是没有在小提琴（足够长，因为它是）我确实使用了现场版本重置。只是没有在小提琴（足够长，因为它是）的感谢，修复了一些间距问题。他们仍然存在间隔问题，在打开的子菜单下面有一个列表项，在顶部列表项之间有较大的间隔。我想你误解了第二个问题。查看打开的
ul.child
（“JSFIDLE中的沟通障碍”）后的列表项，并查看“沟通障碍”和“健康安全和安保”之间的巨大差距。没错，我确实误解了第二部分。请参阅答案中的更多信息，不要认为我能提供更多帮助。谢谢David，我将IE特定类应用于
元素，这样我就可以针对IE的特定版本，如so
.ie7.otherClass
。我还发现
overflow:hidden
有效。在“沟通障碍”（ul.child元素之后的第一个元素）上仍然存在空间问题，我认为这与浮动有关，但我会将此标记为已解决，因为您帮了大忙。非常感谢，这解决了一些间距问题。他们仍然存在间隔问题，在打开的子菜单下面有一个列表项，在顶部列表项之间有较大的间隔。我想你误解了第二个问题。查看打开的
ul.child
（“JSFIDLE中的沟通障碍”）后的列表项，并查看“沟通障碍”和“健康安全和安保”之间的巨大差距。没错，我确实误解了第二部分。请参阅答案中的更多信息，不要认为我能提供更多帮助。谢谢David，我将IE特定类应用于
元素，这样我就可以针对IE的特定版本，如so
.ie7.otherClass
。我还发现
overflow:hidden
有效。在“沟通障碍”（ul.child元素之后的第一个元素）上仍然存在空间问题，我认为这与浮动有关，但我会将此标记为已解决，因为您帮了大忙。很appreciated@Mark是的，不是在小提琴中，而是在现场版本中。@标记是的，不是在小提琴中，而是在现场版本中。