Html IE7中恼人的css问题

它在FF、Opera和Chrome中运行良好。但当然，在IE7中它并不正常。 我有73像素高的列表项，有一个红色边框（总共75像素高）

但我在每个列表项之间都有一个多余的空格。我已经将

和

的填充和边距设置为0，但没有设置为0

在这里你可以看到结果

这是我的CSS：

//<ul with id="articleRotatorList">
#articleRotatorList {
    width: 250px;
    float: left;
    background: #f1f1f1 url(/img/bg/bg_articleRotatorStripe.png) repeat-y left;
}

#articleRotatorList li {
    height: 73px;
    font-size: 0.90em;
    border: 1px solid red;
}

---

这是由于

字体大小小于
1em
造成的。您需要稍微增加
行高度。从
1.10em开始：

#articleRotatorList li {
    height: 73px;
    font-size: 0.90em;
    line-height: 1.10em;
    border: 1px solid red;
}

正如BalusC所建议的，这很可能是字体大小/行高问题，但是我相信您可以通过在ul标签上将两者都设置为0，然后在li标签上重新初始化它们来获得成功。是的，很糟糕。
列表项内部的行距对外部列表项之间的间距有多大影响？增加/减少列表项内的行高，不会删除列表项之间的空格。如果删除
浮动：left
？你根本不需要它，是吗？我必须在
上留下float:left。否则，它会将自身定位在图像容器下方。我需要它在图像容器的右侧。但是浮动：ul上的左边不是问题。你可以在这里了解问题：他的解决方案对我没有帮助。设置
行高：0px#articleRotatorList
上的code>除了将所有文本放在一行之外，什么都不做。仍然有
之间的空格。这不是我建议的全部内容：（ul标记中的行高和字体大小设置为0，并将其重置为li标记中所需的内容。如果您在某个地方有此页面，我很乐意做的不仅仅是粗略猜测IE7过去对我所做的事情：PI已找到解决此问题的方法。看起来这是一个众所周知的问题：。
#articleRotatorList .border {
    width: 20px;
    height: 100%;
    float: left;
}

#articleRotatorList .content {
    width: 210px;
    height: 65px;
    padding: 5px 5px 5px 10px;    
    float: left;
}

#articleRotatorList li {
    height: 73px;
    font-size: 0.90em;
    line-height: 1.10em;
    border: 1px solid red;
}