Solutions aux différentes performances de ul sous Firefox et IE_Experience Exchange

J'ai récemment créé un modèle système pour oblog, qui impliquait ul, j'ai donc compilé cet article + cette grande image.
UL est une balise très couramment utilisée, mais en raison de ses performances différentes sous Firefox et IE, elle donne l'impression aux gens qu'il s'agit d'une balise difficile à contrôler.
Sous Firefox, ul a une valeur de padding, mais pas de valeur de marge ; au contraire, sous IE, ul a une valeur de marge, mais pas de valeur de padding ; [Cela ressort de la comparaison des deuxième et troisième exemples dans la figure ci-dessous]
Sous Firefox, le style de liste de ul est placé par défaut au bord extérieur du contenu. Bien sûr, vous pouvez définir le style de liste sur le bord intérieur du contenu via CSS.
Grâce à des compromis, les paramètres adaptés aux deux navigateurs sont obtenus : padding:0; margin:0; list-style:inside;. Vous pouvez également définir ul sur padding:0; margin:0; list-style:none, puis ajouter une image d'arrière-plan à li, ce qui est également un bon choix.

<style type="text/css"> body{font-size:12px; margin:20px; line-height:18px;} #box{width:200px; background-color:#CC9; border:#990 1px solid;} #box ul{padding:0; margin:0; list-style:inside decimal; } </style> <div id="box"> <ul> <li>Voici la première phrase. </li> <li>C'est la deuxième phrase. </li> <li>C'est la troisième phrase. </li> <li>C'est la quatrième phrase. </li> <li>C'est la cinquième phrase. </li> </ul> </div>
[Ctrl+A pour tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter ]