Come impedire l'imbottitura inferiore extra di 3px sugli elementi dell'elenco in IE7

Question

Ho una pagina in cui il famigerato spazio verticale extra di 3px (sotto ogni elemento li ) viene visualizzato in IE7 su tutti gli elementi della mia lista. Ho una situazione specifica in cui ho bisogno di un testo assolutamente posizionato all'interno del li , in modo che il suo contenitore possa essere impostato su una larghezza inferiore, & amp; il testo si estende oltre il contenitore. Ecco il codice che sto 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>

Sto cercando una soluzione che non implichi un hack CSS specifico per IE7, solo per motivi di purezza CSS. Ho letto che in molti casi, fornire gli elementi che contengono hasLayout risolve la maggior parte di questi problemi di altezza extra di 3px, ma non sono stato in grado di capirlo per questo codice.

Nella mia app, ho finito per applicare un margine inferiore diverso per IE7 (1px anziché 4px) che funziona bene ma non sembra giusto ....

Pagina di test qui

App live qui

Ho provato alcune delle correzioni standard descritte in 456 Berea St & amp; questa pagina , ma o le sto applicando in modo errato al mio esempio, oppure è qualcosa altrimenti nel modo in cui è strutturato il mio codice. Qualche suggerimento per correzioni o altri modi per realizzare questo layout?

Answer 1

Prova quanto segue:

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

Non sono riuscito a risolvere il problema che stavi riscontrando in modo più pulito rispetto a quello che hai già (l'altra soluzione è di fluttuare le LI e cancellarle), tuttavia ti sto offrendo un modo alternativo per farlo. Devo ammettere che è l'HTML più pulito, ma risolve ordinatamente il problema.

Answer 2

Non l'ho provato con questo codice, ma ho specificato un'altezza negli elementi li, quindi ho aggiunto vertical-align: bottom, quindi il codice sarebbe:

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

Funziona per me sia in 6 che in amp; 7