Wirkung im IE
Effekte in Mozilla Firefox
Dies wird durch einen Fehler in der Interpretation des Abstands zwischen Boxen durch den IE verursacht (siehe onestabs „Probleme mit schwebenden Modellen“). Ich habe dieses Problem nie gelöst, bis ich „Table vs. CSS – A Battle of Life and Death“ übersetzt habe. Ein Tipp des Autors hat mir geholfen, eine Lösung zu finden: Verwenden Sie !important.
!important ist eine in CSS1 definierte Syntax. Ihre Funktion besteht darin, die Anwendungspriorität bestimmter Stilregeln zu erhöhen (siehe: W3.org-Erklärung). Das Syntaxformat { sRule!important } wird am Ende der Definition geschrieben, 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 dies verwenden, um verschiedene Stile für IE und andere Browser zu definieren. Wir definieren beispielsweise einen Stil wie diesen:
.colortest {
border:20px solid #60A179 !important;
Grenze:20px fest #00F;
Polsterung: 30px;
Breite: 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 werden, bitte denken Sie daran und beherrschen Sie es :)
