Comment faire pour empêcher un remplissage inférieur de 3 pixels sur les éléments de liste dans IE7

Question

J'ai une page où le fameux espace vertical extra 3px (sous chaque élément li ) est rendu dans IE7 sur tous les éléments de ma liste. J'ai une situation spécifique où j'ai besoin de texte placé absolument dans li , afin que son conteneur puisse être défini sur une largeur inférieure, & amp; le texte s'étend au-delà du conteneur. Voici le code que j'utilise:

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

Je recherche une solution qui ne comporte pas de piratage CSS spécifique à IE7, uniquement pour des raisons de pureté CSS. J'ai lu cela dans de nombreux cas, en donnant aux éléments qui le contenaient hasLayout corrige la plupart de ces problèmes de hauteur supplémentaire de 3 pixels, mais je n'ai pas été en mesure de le comprendre pour ce code.

Dans mon application, j'ai fini par appliquer un niveau de marge différent pour IE7 (1px au lieu de 4px), ce qui fonctionne bien mais ne semble tout simplement pas bien ....

Testez la page ici

application en direct ici

J'ai essayé certains des correctifs standard décrits dans 456 Berea St . & amp; cette page , mais je ne les applique pas correctement à mon exemple, ou quelque chose d'autre. sinon dans la façon dont mon code est structuré. Avez-vous des suggestions de correctifs ou d’autres moyens de réaliser cette présentation?

Answer 1

Essayez ce qui suit:

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

Je ne pouvais pas résoudre le problème que vous aviez avec un produit plus propre que celui que vous avez déjà (l'autre solution consiste à faire flotter les LI et à les supprimer), cependant, je vous propose une autre façon de procéder. J'admets que c'est le code HTML le plus propre, mais il élimine parfaitement le problème.

Answer 2

Je n'ai pas essayé avec ce code, mais j'ai spécifié une hauteur dans les éléments li, puis ajouté vertical-align: bottom, le code serait donc:

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

Fonctionne pour moi dans les deux domaines, à savoir 6 & amp; 7