Css IE7中带有浮动元素的列表项之间的间隙（带有独立测试用例）

我很难消除IE7中列表项之间的差距

当我在li:s中浮动元素时，列表项之间的间隙问题就会出现

这里有一个简单的测试用例（有两种可能的解决方案不起作用）：

…以下是测试中的HTML：

<ul>
    <li class="even">
        <span class="left">left</span>
        <span class="right">right</span>
    </li>
    <li class="odd">
        <span class="left">left</span>
        <span class="right">right</span>
    </li>
    <li class="even">
        <span class="left">left</span>
        <span class="right">right</span>
    </li>
    <li class="odd">
        <span class="left">left</span>
        <span class="right">right</span>
    </li>
</ul>

---

对此有何建议或想法？谢谢

编辑：谢谢你的评论，我没有在其他浏览器中测试过它。所以，您可以使用条件注释，只针对这样的internet explorer

<!--[if IE 7 ]>
 li {height:0px;}
<![endif]-->

黑客必须低于

高度：30px

才能覆盖它

---

我建议您使用条件注释，而不是hack。

您是否尝试过使用Eric Meyers CSS Reset

---

它将所有浏览器默认边距和填充设置为0

如果不将列表项的显示更改为“阻止”并正确重置它们，则在设置列表项的样式时会遇到很多问题

将以下内容添加到css的顶部：

ul li, ul {
  list-style:None;
  margin:0;
  padding: 0;
  display:block;
}

---

可以吗。添加打印屏幕？我认为填充是问题所在（猜测在IE中是不确定的）。但我不确定。很好，它在IE7中工作，但在其他浏览器（safari/firefox）中失败。我正在寻找一个跨浏览器的解决方案。我喜欢使用这种技巧：Fred看起来很有趣，但我觉得有点凌乱。但是，使用你觉得舒服的任何东西：）这与重置无关。如果你检查小提琴，你可以看到它包括在顶部。这是一个通用重置。我想找出哪些部分适用于列表项

<!--[if IE 7 ]>
<link type="text/css" rel="stylesheet" href="ie7.css"/>
<![endif]-->

*height:0px;

ul li, ul {
  list-style:None;
  margin:0;
  padding: 0;
  display:block;
}