Heim  >  Artikel  >  Web-Frontend  >  Lösungen, die mit verschiedenen Browsern in CSS kompatibel sind

Lösungen, die mit verschiedenen Browsern in CSS kompatibel sind

伊谢尔伦
伊谢尔伦Original
2016-11-22 11:25:371267Durchsuche

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,