Как предотвратить добавление нижнего отступа на 3 пикселя к элементам списка в IE7

Question

У меня есть страница, где печально известное дополнительное вертикальное пространство размером 3 пикселя (под каждым элементом li ) отображается во всех моих элементах списка в IE7. У меня есть особая ситуация, когда мне нужно, чтобы текст был абсолютно расположен внутри li , чтобы его контейнер можно было установить на меньшую ширину, & amp; текст выходит за пределы контейнера. Вот код, который я использую:

<style type="text/css">
 div { width: 160px; font: 8pt arial,helvetica,sans-serif; border: 1px solid #999; }
  div ul { margin: 0; padding: 0; list-style: none; }
   div ul li { width: 30px; height: 20px; margin: 0 0 4px; padding: 0; background-color: #c00; }
    div ul li a { display: block; line-height: 20px; color: #000; text-decoration: none; }
     div ul li a em { position: absolute; margin-left: 5px; }
</style>

<div>
 <ul>
  <li><a href="#"><em>#1: premature brake wear</em></a></li>
  <li><a href="#"><em>#2: squeaky brakes</em></a></li>
  <li><a href="#"><em>#3: bad gas mileage</em></a></li>
 </ul>
</div>

Я ищу решение, которое не включает в себя специфический для IE7 взлом CSS, просто ради чистоты CSS. Я читал, что во многих случаях предоставление содержащихся элементов hasLayout решает большинство этих проблем с высотой в 3 пикселя, но я не смог выяснить это для этого кода.

В моем приложении я применил другое нижнее поле для IE7 (1px, а не 4px), которое работает нормально, но кажется не совсем правильным ....

Тестовая страница здесь

Прямое приложение здесь

Я попробовал некоторые стандартные исправления, описанные на 456 Berea St & амп; эту страницу , но я неправильно применяю их в своем примере, или это что-то иначе в том, как мой код структурирован. Любые предложения по исправлению или другие способы достижения этого макета?

Answer 1

Попробуйте сделать следующее:

<style type="text/css">
    div.test { width: 160px; font: 8pt arial,helvetica,sans-serif; border: 1px solid #999; overflow:hidden; }
    div.test ul { margin: 0; padding: 0; list-style: none;}
    div.test ul li { margin: 0 0 4px; }
    div.test ul li a { display: inline-block; }
    div.test ul li a { display: block; padding: 0 5px; line-height: 20px; color: #000; text-decoration: none; position: relative; z-index: 2; }
    div.test ul li b {   background-color: #c00; height: 20px; width: 20px; position: absolute; display: block; z-index: 1; }
</style>

<div class="test">
    <ul>
        <li><b></b><a href="#"><em>#1: premature brake wear</em></a></li>
        <li><b></b><a href="#"><em>#2: squeaky brakes</em></a></li>
        <li><b></b><a href="#"><em>#3: bad gas mileage</em></a></li>
    </ul>
</div>

Я не смог решить проблему, которая у вас была, по сравнению с тем, что у вас уже есть (другое решение - всплыть LI и очистить их), однако, я даю вам альтернативный способ сделать это. Я признаю, что это самый чистый HTML, но он аккуратно обходит проблему.

Answer 2

Я не пробовал это с этим кодом, но я указал высоту в элементах li, затем добавил vertical-align: bottom, чтобы код был:

div.test ul li { height: 20px; vertical-align: bottom;}

У меня работает как в 6 и amp; 7