Heim > Artikel > Web-Frontend > Lösungen, die mit verschiedenen Browsern in CSS kompatibel sind
1. Mehrere Browser in CSS unterstützen unterschiedliche Schlüsselwörter, die aus Gründen der Browserkompatibilität wiederholt definiert werden können
!wichtig kann von FireFox und IE7 erkannt werden
* kann von IE6 und IE7 erkannt werden
_ Kann sein erkannt von IE6
* Kann von IE7 erkannt werden
Unterschied zwischen IE6 und FF:
Hintergrund:orange;*Hintergrund:blau;
Unterschied zwischen IE6 und IE7:
Hintergrund:grün !wichtig ; Hintergrund:blau;
Unterschied zwischen IE7 und FF:
Hintergrund:orange;
Unterschied zwischen FF, IE7 und IE6:
Hintergrund:grün !wichtig ;*Hintergrund :blue;
IE7, IE8 kompatibel:
2 -spezifische Bedingungen Kommentare
;! --[if IE 7]link rel="stylesheet" type="text/css" href="ie7.css; " / >
3 wenige Ansichten Die Interpretation der tatsächlichen Pixel durch den Browser
IE/Opera: Die tatsächliche Breite des Objekts = (Rand links) Breite (Rand rechts)
Firefox/Mozilla: Die tatsächliche Breite des Objekts = (Rand- left) (border-left) -width) (padding- left) width (padding-right) (border-right-width) (margin-right)
4. Mausgestenproblem: Das Cursor-Attribut von Firefox funktioniert nicht unterstützt Hand, unterstützt aber beides; verwenden Sie daher aus Kompatibilitätsgründen den Zeiger
5. Beim Festlegen des Style-Attributs des HTML-Tags in FireFox müssen alle Werte für Position, Breite, Höhe und Größe angegeben werden gefolgt von px. IE unterstützt diese Schreibmethode ebenfalls, daher ist sie einheitlich. Fügen Sie px-Einheiten hinzu. Beispielsweise kann Obj.Style.Height = imgObj.Style.Height 'px';
6 die Einstellung des abgekürzten Auffüllattributs nicht analysieren, z. B. padding 5px 4px 3px 1px; top:5px; padding-right:4px; padding-left:1px0;
7 Beim Entfernen der Einrückung von ul, ol und anderen Listen sollte der Stil wie folgt geschrieben werden: -style:none;margin:0px; padding:0px; Das Attribut „margin“ ist für IE gültig und das Attribut „padding“ ist für FireFox gültig
8 .Alpha(style=0,opacity=60); FireFox:opacity:0.6;
9. CSS-Steuerung abgerundete Ecken: IE: unterstützt keine abgerundeten Ecken; border-radius:4px; oder
-moz-border -radius-topleft:4px; 🎜>-moz-border-radius- unten rechts:4px;
10. CSS-Doppellinien-Bump-Rand: IE: border:2px outset;
FireFox:
-moz-border -top-colors: #d4d0c8 weiß;
-moz-border-left-colors: #d4d0c8 weiß; bottom-colors:#404040 #808080;
11. IE unterstützt die CSS-Methode „cursor:url()“, um die Cursor-Stildatei und den Farbstil der Bildlaufleiste anzupassen; FireFox unterstützt die beiden oben genannten
12. IE hat einen Fehler, bei dem das Select-Steuerelement immer oben ist und das gesamte CSS nicht auf dem Select-Steuerelement funktioniert
13. IE unterstützt Label-Tags in Formularen, einschließlich Bildern und Textinhalten; Labels, die Bilder enthalten, werden nicht unterstützt. Das Label „Radio“ oder „CheckBox“ wird nicht für „Produce“-Effekte angezeigt Inline anzeigen und blockieren
16. Firefox setzt margin-left für Div. Wenn margin-right auf „auto“ eingestellt ist, ist es bereits zentriert, aber es funktioniert nicht im IE
17 Wann FireFox setzt text-align auf den Body, das Div muss margin: auto (hauptsächlich margin-left margin-right) festlegen, bevor es zentriert werden kann
18 Es ist am besten, den CSS-Stil von Hyperlinks festzulegen diese Reihenfolge: L-V-H-A. Das heißt,
Dadurch kann vermieden werden, dass einige Hyperlinks nach dem Besuch nicht über die Hover- und Active-Stile verfügen
19. IE Um den automatischen Zeilenumbruch für lange Absätze in CSS festzulegen, verwenden Sie die JS-Einfügemethode in Firefox, um dies zu erreichen:
20 -container Nach dem Hinzufügen des Floating-Attributs kann der Container nicht automatisch geöffnet werden
Lösung: Fügen Sie dem nächsten Tag nach dem Ende des Tags ein CSS „clear:both;
hinzu, um den Float zu löschen.