html - IE7 中恼人的 css 问题

Question

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

但是我在每个列表项之间得到了不需要的空格。我已经尝试将 <ul> 的 padding 和 margin 设置为 0和 <li> , 但没有成功。

在这里你可以看到结果。

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>

这是边框/内容 div 的 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;
}