Wie 3px extra Bodenpolster auf Listenelemente in IE7 zu verhindern

Question

Ich habe eine Seite, wo der berüchtigte 3px zusätzliche vertikale Raum (unter jedem li Elemente) auf allen meinen Listenelementen in IE7 gerendert wird. Ich habe eine konkrete Situation, wo ich absolut in dem li positionierte Text benötigen, so dass sein Behälter auf eine geringere Breite eingestellt werden kann, und der Text erstreckt sich über den Behälter. Hier ist der Code verwende ich:

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

Ich bin auf der Suche nach einer Lösung, die keine IE7 spezifischen CSS-Hack mit sich bringt, nur um ihrer selbst willen CSS Reinheit. Ich habe in vielen Fällen gelesen, dass, was die Elemente enthält, hasLayout die meisten dieser 3px zusätzliche Höhe Probleme löst, aber ich habe nicht in der Lage gewesen, es für diesen Code zu verstehen.

In meiner app, landete ich für IE7 eine andere margin-bottom Anwendung nach oben (1px statt 4px), der gut arbeitet, aber scheint einfach nicht richtig ....

Testseite hier

Live-App hier

Ich habe einige der Standard-Fixes beschrieben anprobiert 456 Berea St & dieser Seite , aber entweder ich ihre Anwendung falsch zu meinem Beispiel, oder es ist etwas anderes in der Art und Weise mein Code strukturiert. Irgendwelche Vorschläge für Korrekturen oder andere Möglichkeiten, um dieses Layout zu erreichen?

Answer 1

Versuchen Sie Folgendes:

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

Ich kann das Problem nicht beheben Sie einen Reiniger hatten als das, was Sie bereits haben (die andere Lösung ist die LI und klar, sie zu schweben) aber ich Ihnen eine alternative Möglichkeit gäbe, dies zu tun. Ich gebe zu, es ist die sauberste HTML, aber es ist sauber, das Problem umgehen.

Answer 2

Ich habe versucht, es nicht mit diesem Code, aber ich habe eine Höhe in den li-Elementen angegeben, dann hinzugefügt vertical-align: Boden, so würde der Code:

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

Funktioniert bei mir in beiden dh 6 & 7