Поля после элементов списка в 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 равной 1em - это сделает высоту строки такой же, как и размер шрифта.

Еще лучше, установите высоту строки на 1,4, что дает емухороший интервал, чтобы элементы не работали вместе.

Это будет означать, что если вы увеличите размер шрифта, вам не нужно будет также изменять высоту строки в li, если вы это сделаете - иобновлять, если пользователь устанавливает больший размер шрифта.

Answer 2

Сохраняйте ту же разметку и заменяйте весь свой CSS этим;

ul {
    padding: 0;
    margin: 0;
}

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

Answer 3

У вас высота 14px .... если вы добавите высоту строки 14px, это должно решить проблему:

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

Edit: На самом деле 16 12 работает лучше:

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