Cómo evitar el relleno inferior extra de 3px en los elementos de la lista en IE7

Question

Tengo una página donde el infame espacio vertical extra de 3px (debajo de cada elemento li ) se representa en IE7 en todos los elementos de mi lista. Tengo una situación específica en la que necesito texto ubicado absolutamente dentro del li , de modo que su contenedor se pueda establecer en un ancho menor, & amp; El texto se extiende más allá del contenedor. Aquí está el código que estoy 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>

Estoy buscando una solución que no implique un hack CSS específico de IE7, solo por el bien de la pureza CSS. Lo he leído en muchos casos, al dar los elementos que contienen hasLayout resuelve la mayoría de estos problemas de altura adicional de 3px, pero no he podido resolverlo para este código.

En mi aplicación, terminé aplicando un margen inferior diferente para IE7 (1px en lugar de 4px) que funciona bien pero no parece correcto ...

Página de prueba aquí

Aplicación en vivo aquí

He probado algunas de las soluciones estándar descritas en 456 Berea St &erio; esta página , pero o los estoy aplicando incorrectamente a mi ejemplo, o es algo más en la forma en que está estructurado mi código. ¿Alguna sugerencia para arreglos u otras formas de lograr este diseño?

Answer 1

Pruebe lo siguiente:

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

No pude solucionar el problema que tenías más limpio que el que ya tienes (la otra solución es flotar los LI y borrarlos), sin embargo, te estoy dando una forma alternativa de hacerlo. Admito que es el HTML más limpio, pero evita el problema.

Answer 2

No lo he intentado con este código, pero he especificado una altura en los elementos li, luego agregué vertical-align: bottom, por lo que el código sería:

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

Funciona para mí en ambos, es decir, 6 & amp; 7