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

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

1 голос
/ 11 марта 2009

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

<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 & на этой странице , но либо я неправильно применяю их в своем примере, либо это что-то другое в как мой код структурирован. Любые предложения по исправлениям или другие способы выполнения этого макета?

Ответы [ 2 ]

3 голосов
/ 24 октября 2011

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

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

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

1 голос
/ 11 марта 2009

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

<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, но он аккуратно обходит проблему.

...