Como evitar 3px preenchimento de fundo extra sobre os itens da lista no IE7

Question

Eu tenho uma página onde o 3px espaço vertical adicional infame (abaixo de cada elemento li) está sendo processado no IE7 em todos os itens da lista meus. Eu tenho uma situação específica onde eu precisa o texto posicionado absolutamente dentro do li, de modo que seu recipiente pode ser ajustado para uma largura menor, e o texto se estende para além do recipiente. Aqui está o código que estou usando:

<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>

Eu estou procurando uma solução que não envolve um corte CSS específicos do IE7, apenas por causa CSS de pureza. Eu li que em muitos dos casos, dando os elementos contendo hasLayout resolve a maioria destes 3px problemas de altura extras, mas eu não tenho sido capaz de descobrir por este código.

Em meu aplicativo, acabei aplicando uma margin-bottom diferente para IE7 (1px em vez de 4px) que funciona bem, mas simplesmente não parece certo ....

página de teste aqui

aplicativo ao vivo aqui

Eu tentei algumas das correções padrão descrito em 456 Berea St & desta página , mas ou eu estou aplicando-los incorretamente ao meu exemplo, ou é outra coisa na maneira como o meu código está estruturado. Todas as sugestões para correções ou outras maneiras de alcançar este layout?

Answer 1

Tente o seguinte:

<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>

Eu não poderia resolver o problema que estava tendo qualquer mais limpo do que o que você já tem (a outra correção é flutuar o LI de e eliminá-los), no entanto, eu estou dando-lhe uma forma alternativa de fazer isso. Eu admito que é o HTML mais limpa, mas não perfeitamente contornar o problema.

Answer 2

Eu não tentei com este código, mas eu especificado uma altura nos elementos li, depois acrescentou vertical-align: baixo, de modo que o código seria:

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

Funciona para mim no IE 6 & 7