1. „Die Verwendung von important in IE6 und FF“
.box1 {width:150px !important;}
.box1 {width:250px;}
!important bedeutet, dass diese Einstellung beim Auftreffen auf !important keinen Fehler macht und ihre Funktion einfach ignoriert. Wenn die Breite später festgelegt wird, verwendet der IE die zuletzt festgelegte Breite. Es wird der aktuelle Wert verwendet, der der vorherige !important-Wert ist. Zum Beispiel: #test {width: 300px !important}Sowohl IE als auch FF zeigen 300PX an. Wenn am Ende ein Wert steht, zeigt IE den folgenden Wert an und FF zeigt den Wert mit !import davor an!
Andere Browser halten dies für wichtig. Aufgrund des Prioritätsverhältnisses hat immer die zuvor eingestellte Breite Vorrang.
#test {width:300px;width:400px !important ;}
Das in diesem Satz angezeigte Ergebnis ist, dass die Breite von IE und FF jeweils 400PX beträgt
#test {width:300px !important ;width:400px;}
Das Anzeigeergebnis dieses Satzes ist FF: 300px IE: 400px
Stellen Sie daher bei der Verwendung von !important die Wörter, die !important enthalten, voran.
Aber das Problem kommt wieder, IE7 erkennt bereits !important, siehe unten!
2. CSS-Stile für Firefox ie6 ie7
Heutzutage verwenden die meisten von ihnen !important zum Hacken. Die ie6- und Firefox-Tests können normal angezeigt werden, aber ie7 kann !important korrekt interpretieren, was dazu führt, dass die Seite nicht wie erforderlich angezeigt wird! Ich habe einen guten Hack für IE7 mit „*+html“ gefunden. Durchsuchen Sie ihn jetzt mit IE7 und es sollte kein Problem geben.
Schreiben Sie nun ein CSS wie dieses:
#1 { Farbe: #333; } /* Moz */
* html #1 { color: #666 } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
Dann wird die Schriftfarbe unter Firefox als #333, unter IE6 als #666 und unter IE7 als #999 angezeigt. Sie können „+“ verwenden, um einen CSS-Hack zu implementieren, der nur vom IE erkannt wird. Einige Freunde denken vielleicht darüber nach, „_“-Hack zu verwenden , aber sie werden unterschieden, weil „_“ in IE7 nicht erkannt wird. Verwenden Sie also +
Testergebnisse:
IE5.5-, IE6- und IE7-Browser können es erkennen;
Die Browser FF2.0, Opera 9 und Safari 2 erkennen es nicht.
3. IE7-Hack
IE7 hat viele Fehler behoben und Unterstützung für einige Selektoren hinzugefügt, sodass Hacks zum Ausblenden oder Anzeigen von IE wie *html {}, html>body {}, !important usw. jetzt in IE7 nicht funktionieren. Obwohl CSS Hack nicht empfohlen wird und bedingte Kommentare ein narrensicherer Filter sind, können bedingte Kommentare nur in HTML angezeigt werden, sodass CSS Hack immer noch seine Berechtigung hat. Nanobot hat einige CSS-Hacks für IE7 entdeckt, insbesondere:
>Körper
html*
*+html
Von diesen drei Schreibmethoden sind die ersten beiden illegale CSS-Schreibmethoden und werden in standardkonformen Browsern ignoriert, IE7 glaubt dies jedoch nicht. Für > body wird der fehlende Selektor durch den globalen Selektor * ersetzt, d. Bei HTML* handelt es sich ebenfalls um einen CSS-Syntaxfehler, da zwischen HTML und * kein Leerzeichen steht. IE7 ignoriert ihn jedoch nicht, sondern geht fälschlicherweise davon aus, dass hier ein Leerzeichen vorhanden ist. Für den dritten Typ *+html geht IE7 davon aus, dass die DTD-Deklaration vor HTML ebenfalls ein Element ist, daher wird HTML ausgewählt. Unter diesen drei Methoden ist nur diese Methode legales CSS-Schreiben, was bedeutet, dass sie den Validator passieren kann. Die Verifizierung ist daher auch eine vom Autor empfohlene Hack-Nutzung.
Internet Explorer 6 und niedriger
Verwenden Sie * html {}, um das HTML-Element auszuwählen.
IE 7 und niedriger
Verwenden Sie *+html, * html {}, um das HTML-Element auszuwählen.
Nur IE 7
Verwenden Sie *+html {}, um das HTML-Element auszuwählen.
Nur IE 7 und moderne Browser
Verwenden Sie html>body {}, um das Body-Element auszuwählen.
Nur moderne Browser (nicht IE 7)
Verwenden Sie html>/**/body {}, um das Body-Element auszuwählen.
4. IE und FF haben unterschiedliche Interpretationen des Box-Modells: #test { width: 650px !important;width: 648px;padding-left:2px;background:#fff;
Die vom Test angezeigte Bandbreite beträgt 650 Pixel
Die Gesamtbreite der IE-Box ist: die Summe der Breiten von Breite + Innenabstand + Rand + Rand. Die Gesamtbreite der FF-Box ist die Breite von Breite, und die Breite von Innenabstand + Rand + Rand ist in der Breite enthalten.
Wenn BOX{WIDTH:"300"; PADDING:"5PX";} vorhanden ist, sollte die Breite der BOX im IE 310 betragen. Die Breite von FF beträgt 300. Wenn die BOX gefüllt ist, sollten Sie BOX{WIDTH: "290"! WIDTH: "300";} verwenden, um sicherzustellen, dass die Breite der BOX immer 300 Pixel beträgt Es wird kein Phänomen der Streckung auftreten, und in FF wird es keine Situation geben, in der die schwimmende Schicht nicht vollständig gefüllt ist.
5. Das ul-Tag hat in Mozilla einen Füllwert, im IE hat jedoch nur margin einen Wert.
Setze ul{margin:0;padding:0}
6. IE kann den Unterschied zwischen einer Erbschaftsbeziehung und einer Vater-Sohn-Beziehung nicht unterscheiden. Es handelt sich bei allen um Erbschaftsbeziehungen.
7. Das Festlegen der Auffüllung eines Div in FF führt zu einer Vergrößerung der Breite und Höhe, im IE jedoch nicht (kann mit !important gelöst werden).
8. Zentrierproblem
1. Stellen Sie die Zeilenhöhe auf die gleiche Höhe wie das aktuelle Div ein und übergeben Sie dann Vertical-Align: Middle (Achten Sie darauf, den Inhalt nicht umzubrechen.)
2. Horizontal zentriert: 0 auto (natürlich nicht universell)
3. Wenn Sie dem Inhalt in einem Tag Stile hinzufügen müssen, müssen Sie display: block festlegen (üblich in Navigations-Tags).
4. Der Unterschied im Verständnis von BOX zwischen FF und IE führt zu einem Unterschied von 2 Pixeln und Problemen wie der Verdoppelung des Spielraums eines Div-Sets auf Float unter IE.\
5. Unterschiedliche Leistungen von UL:
Das ul-Tag verfügt standardmäßig über Listenstil und Auffüllung. Es ist am besten, es im Voraus zu deklarieren, um unnötige Probleme zu vermeiden (häufig bei Navigations-Tags und Inhaltslisten).
6. Legen Sie die Höhe des Div nicht als externen Wrapper fest. Fügen Sie am besten overflow:hidden hinzu, um eine Höhenanpassung zu erreichen.
9. Der Handcursor gilt nur für IE. Wenn ihn sowohl IE als auch FF erkennen, verwenden Sie bitte den Cursor: Zeiger.