IE中列表项后的边距

Question

我使用这段代码来显示一个<ul>

<ul>
  <li class="odd"  id="lid-3">Breakbeat</li>
  <li class="even" id="lid-11">Classical</li>
  <li class="odd"  id="lid-16">Downbeat</li>
  <li class="even" id="lid-30">Filmmusik</li>
  <li class="odd"  id="lid-24">Folk&amp;Country</li>
  <li class="even" id="lid-40">Jazz/Blues</li>
  <li class="odd"  id="lid-48">Latin</li>
  <li class="even" id="lid-64">Pop/Mainstream</li>
  <li class="odd"  id="lid-68">Reggae</li>
  <li class="even" id="lid-75">Rock</li>
  <li class="odd"  id="lid-81">Techno/Electro</li>
  <li class="even" id="lid-35">Urban</li>
  <li class="odd"  id="lid-88">World</li>
</ul>

还有这个CSS：

ul span {
    display: block;
    padding: 1px 0 1px 5px;
    cursor: pointer;
    font-size: 12px;
} 

ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

ul li {
    padding: 0px 0 2px 5px;
    cursor: pointer;
    height: 14px;
    margin: 0;
    display: block;
    overflow: hidden;
    position: relative;
}

无论我做什么，列表项都有一个底边距。它是从哪里来的？我该如何解决这个问题呢？

Answer 1

将li上的line-height设置为1em -这将使line-height与font-size相同。

更好的是，将line-height设置为1.4，这样就有了一个很好的间距，这样项目就不会排在一起。

这意味着如果你增加了字体的大小，你将不需要同时改变li中的行高-如果你这样做了-并且如果用户设置了更大的字体大小，你将会更新。

Answer 2

你的身高是14px……如果你添加一个14px的行高，应该可以解决这个问题：

ul li {
    cursor: pointer;
    display: block;
    height: 14px;
    line-height: 14px;
    overflow: hidden;
    padding: 0 0 2px 5px;
    position: relative;
}

编辑:实际上16 12更好：

ul li {
    padding: 0px 0 2px 5px;
    cursor: pointer;
    height: 16px;
    line-height:12px;
    margin: 0;
    display: block;
    overflow: hidden;
    position:relative;
}

Answer 3

保留相同的标记，并用这个替换所有的CSS；

ul {
    padding: 0;
    margin: 0;
}

ul li {
    padding: 0;
    margin: 0;
}