Verwenden Sie !important, um Layoutunterschiede zwischen IE und Mozilla_CSS/HTML zu beheben

Beim Entwerfen der „Web Designer“-Seite gibt es ein Problem, das mich stört. Der Anzeigeeffekt des Hauptmenüs im IE und anderen Browsern (Mozilla, Opera usw.) weist eine Abweichung von 2 Pixel auf. Der Screenshot sieht wie folgt aus:

Wirkung im IE

Effekte in Mozilla Firefox

Dies wird durch einen Fehler in der IE-Interpretation des Abstands zwischen Boxen verursacht (siehe onestabs „ Floating-Model-Problem “). Ich habe dieses Problem nie gelöst, bis ich „Table vs. CSS – Ein Kampf auf Leben und Tod“ übersetzt habe. Ein Tipp des Autors hat mir geholfen, eine Lösung zu finden: Verwenden Sie !important.

!important ist eine in CSS1 definierte Syntax, die verwendet wird, um die Anwendungspriorität bestimmter Stilregeln zu erhöhen (siehe: W3.orgs Erklärung ). Grammatikformat { sRule!important }, das am Ende der Definition geschrieben wird, zum Beispiel:

box{color:red !important;}

Der wichtigste Punkt ist: Der IE hat diese Syntax nie unterstützt, andere Browser jedoch schon. Daher können wir damit verschiedene Stile für IE und andere Browser definieren. Beispielsweise definieren wir einen solchen Stil:

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

Beim Surfen in Mozilla können Sie die Priorität von !important erkennen, daher wird die Farbe #60A179 angezeigt:

Beim Surfen im IE wird die Priorität von !important nicht verstanden, daher wird die Farbe #00F angezeigt:

Wie Sie sehen, können wir mit !important unterschiedliche Stile für IE- und Nicht-IE-Browser festlegen. Fügen Sie einfach !important nach dem Nicht-IE-Browserstil hinzu. Daher kann der oben erwähnte Anzeigeunterschied von 2 Pixel auf meiner Homepage leicht behoben werden:

PADDING-TOP: 11px !important;
PADDING-TOP: 9px

!important wird auf jeden Fall ein leistungsstarkes Tool für das CSS-Layout, bitte denken Sie daran und beherrschen Sie es :)