Question

我在消除 IE7 中列表项之间的差距方面遇到了很大的困难。

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

这里有一个简单的测试用例（有两种不同的可能解决方案无效）： http://jsfiddle.net/UJMr8/1/

...这是测试中的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>

使用以下css：

li     { height: 30px; line-height: 30px; padding: 0 10px; }
.even  { background: #ccc; }
.odd   { background: #eee; }
.left  { float: left; }
.right { float: right; }

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

Answer 1

编辑：感谢您的评论，我没有在其他浏览器中测试过。因此，您可以使用条件注释，仅像这样定位Internet Explorer

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

或者您可以使用外部css，针对您可能遇到的任何其他问题定位Internet Explorer 7，并且找不到跨浏览器解决方案：

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

另一种选择是使用互联网浏览器黑客，如星号*。一个例子是

*height:0px;

黑客必须低于height:30px才能覆盖它。

我建议你使用条件评论，而不是黑客。

Answer 2

您是否尝试过使用Eric Meyers CSS重置？

http://www.cssreset.com/downloads/css-resets/eric-meyer-reset-css/eric-meyer-reset.css

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

Answer 3

如果您不将其显示更改为阻止并正确重置它们，则样式列表项会出现很多问题。

将此添加到您的css顶部：

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

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

3 个答案: