Effet dans IE
Effets dans Mozilla Firefox
Ceci est dû à un bug dans l'interprétation par IE de la distance entre les cases (voir "Problèmes avec les modèles flottants" de onestab). Je n'ai jamais résolu ce problème jusqu'à ce que j'ai traduit "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. Sa fonction est d'augmenter la priorité d'application des règles de style spécifiées (voir : explication W3.org). Le format de syntaxe { sRule!important } est écrit à la fin de la définition, par exemple :
boîte{couleur:rouge !important;}
Le point le plus important est le suivant : IE n’a jamais pris en charge cette syntaxe, contrairement à d’autres navigateurs. 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 style comme celui-ci :
.colortest {
bordure:20px solide #60A179 !important;
bordure : 20px solide #00F ;
remplissage : 30 px ;
largeur : 300 px ;
}
Lorsque vous naviguez 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 :)
