Question

它在FF，Opera和Chrome中运行良好。但是，它在IE7中无法正常工作。我的列表项目高73像素，红色边框（总高度为75像素）。

但是我在每个列表项之间得到了一个不需要的空间。我已经设法将<ul>和<li>的填充和边距设置为0，但是没有任何意义。

在这里你可以看到结果。

css f** up in IE http://stiengenterprises.com/download/tmp/css_stuff.jpg

这是我的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;
}

如何删除列表项之间的空格？

已更新 添加了HTML源代码：

<ul id="articleRotatorList">

                <li id="article_3303">
                    <div class="border"/>
                    <div class="content">
                        <a title="Svangerskap" href="/en/PROSJEKTER/Fersking/Svangerskap/">
                        <h2>Svangerskap</h2>
                        Lorem Ipsum is simply dummy text of the printing a... 
                        </a>
                    </div>    
                </li>

                <li id="article_3293">
                    <div class="border"/>
                    <div class="content">
                        <a title="Første leveår" href="/en/PROSJEKTER/Fersking/forste_leveaar/">
                        <h2>Første leveår</h2>
                        Lorem Ipsum is simply dummy text of the printing a... 
                        </a>
                    </div>    
                </li>

                <li id="article_3320">
                    <div class="border"/>
                    <div class="content">
                        <a title="Barnesykdommer" href="/en/PROSJEKTER/Fersking/Barnesykdommer/">
                        <h2>Barnesykdommer</h2>
                        Lorem Ipsum is simply dummy text of the printing a... 
                        </a>
                    </div>    
                </li>

            </ul>

这里是border / content divs的css：

#articleRotatorList .border {
    width: 20px;
    height: 100%;
    float: left;
}

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

Answer 1

这是由font-size小于1em引起的。你需要增加line-height一点。从1.10em开始：

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

Answer 2

正如BalusC所说，这很可能是字体大小/行高问题，但我相信你可以通过在ul标签上将它们都设置为0并在li标签上重新初始化它们来获得成功。是的，很糟糕。

在IE7中烦人的CSS问题

2 个答案: