Utilisez !important pour résoudre les différences de mise en page entre IE et Mozilla_CSS/HTML

Lors de la conception de la page "Web Designer", il y a un problème qui m'a dérangé. L'effet d'affichage du menu principal dans IE et autres navigateurs (Mozilla, Opera, etc.) présente un écart de 2 pixels. La capture d'écran est la suivante :

Effet dans IE

Effets dans Mozilla Firefox

Ceci est dû à un bug dans l'interprétation par IE de la distance entre les cases (reportez-vous au " Problème de modèle flottant " de onestab). Je n'ai jamais résolu ce problème jusqu'à ce que je traduise " Table vs. CSS--A battle of life and death ". Un conseil de l'auteur m'a aidé à trouver une solution : utilisez !important.

!important est une syntaxe définie en CSS1, qui est utilisée pour augmenter la priorité d'application des règles de style spécifiées (voir : Explication de W3.org ). Format de grammaire { sRule!important }, qui est écrit à la fin de la définition, par exemple :

box{color:red !important;}

Le point le plus important est le suivant : IE n’a jamais pris en charge cette syntaxe, mais d’autres navigateurs le font. Par conséquent, nous pouvons l'utiliser pour définir différents styles pour IE et d'autres navigateurs. Par exemple, nous définissons un tel style :

.colortest { 
border:20px solid #60A179 !important;
border:20px solid #00F;
padding: 30px;
width : 300px;
} 

.

Lors de la navigation dans Mozilla, vous pouvez comprendre la priorité de !important, donc la couleur #60A179 s'affiche :

Lors de la navigation dans IE, la priorité de !important n'est pas comprise, donc la couleur #00F s'affiche :

Comme vous pouvez le voir, en utilisant !important, nous pouvons définir différents styles pour les navigateurs IE et non-IE. Ajoutez simplement !important après le style du navigateur non-IE. Par conséquent, la différence d'affichage de 2 pixels sur ma page d'accueil mentionnée ci-dessus peut être facilement résolue :

PADDING-TOP : 11px !important
PADDING-TOP : 9px ; !important deviendra certainement un outil puissant pour la mise en page CSS, n'oubliez pas et maîtrisez-le :)