Come attivare Haslayout su questa Li per IE 7 White Space Bug

Question

Ecco la parte HTML:

<nav id="main-navigation">
<ul>
    <li><a href="#" target="_self">lorem ipsium lorem ipsium lorem</a></li>
    <li><a href="#" target="_self">lorem ipsium lorem lorem</a></li>
    <li><a href="#" target="_self">lorem ipsium lorem ipsium lorem</a></li>
    <li><a href="#" target="_self">lorem ipsium lorem</a></li>                     
</ul>
</nav>

Ecco il CSS:

#main-navigation ul li a {    
    display:block;
    font-size: .8em;
    background: lime url("http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif") no-repeat right center;
    border-top: 1px dotted #ccc;
    color:#000; 
    padding: 2px 0;
}

#main-navigation ul li a.last {
    border-bottom: 1px dotted #ccc;
}


#main-navigation ul li a:hover,
#main-navigation ul li a:focus,
#main-navigation ul li a:active{
    background: red url("http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif") no-repeat right center;
    color:#fff
}

Vorrei non cambiare il markup HTML.

Se lo vedi su buoni browser e poi su IE 7, vedrai che gli oggetti LI su IE7 hanno molto spazio bianco tra di loro.

Ho provato ad applicare l'altezza: 1px; Su un su un file correlato solo CSS IE. Senza fortuna.

Come si può innescare correttamente l'haslayout in modo che il bug dello spazio bianco possa andare via?

Answer 1

Soluzione:

Parte HTML:

 <!--[if lt IE 9]>
  <link rel="stylesheet" href="badbrowser.css"/>
<![endif]-->

CSS parte di Badbrowser.css:

/* Fix for vertical list LI white space - hasLayout trigger */
#main-navigation li a {
    display:inline-block;
}

#main-navigation li a {
    display:block;
}

Answer 2

La correzione è impostare vertical-align: bottom; sugli elementi elenchi.