Bug Espace blanc de la ligne / Liste des articles (li) dans IE6

Si vous avez déjà fait (ou en faisant un) un menu vertical à l'aide des éléments de liste (li) et les balises CSS, vous pourriez rencontrer, ce encore un autre bug dans Internet Explorer, IE 6 inserts où ces écarts entre les éléments de la liste qui contiennent des éléments de niveau bloc, à-dire s'il n'y a aucun espace entre les éléments de liste dans le balisage. Merci, mais non merci, la version d'IE 7 semble exempt de ce bug.
Si comme moi, et beaucoup d'autres, vous appartenez à ce groupe de développeurs frustrés, qui ont encore pour obtenir leurs nouvelles dispositions, qui travaillent dans IE6 trop, alors cela pourrait se révéler utile. Jetez un oeil ...

Balisage de l'échantillon:

<ul id="menu">
<li> <a href="#"> Accueil </ a> </ li>
<li> <a href="#"> propos </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> portefeuille </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Contactez-nous </ a> </ li>
</ Ul>

Vous pouvez créer un peu de CSS, similaire à celui ci-dessous, à transfrom le balisage ci-dessus dans un menu vertical ....

Exemple de CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; largeur: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solide # FFF;
}

Les résultats vous verrez ...
null

Solution pour ce bogue ... (modifié / ajouté CSS en gras et italique)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; largeur: 150px;
float: left; / * contient cette liste des articles flottants * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Ceci fixe le * /
largeur: 100%; / * espaces bug dans IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solide # FFF;
}

Si la solution ci-dessus doesnot semble pas fonctionner (pour des raisons connues d'IE6 seulement) ... essayer cette méthode au lieu

Il suffit d'ajouter cette supplémentaires IE6 seuls styles à votre balisage ...

<-! [If lt IE 7>
<style type="text/css">
# Menu li a {display: inline-block;}
# Menu li a {display: block;}
</ Style>
<[Endif] ->


Laisser un commentaire

NDK la maison | Exprimant IT | Bouche Exprimant | Penmenship Exprimant | Awe Exprimant | m'exprimer