Einführung in Multi-Browser-Kompatibilitätsprobleme und Lösungen mithilfe von CSS

Kompatibilitätsverarbeitungspunkte
1. DOCTYPE wirkt sich auf die CSS-Verarbeitung aus

2. FF: Nach dem Festlegen von Padding wird die Div-Größe Höhe und erhöht Breite, IE jedoch nicht, daher müssen Sie !important verwenden, um eine zusätzliche Höhe und Breite festzulegen

3. FF: unterstützt !important, aber IE ignoriert es. Sie können !important zum Festlegen verwenden ein spezieller Stil für FF

4. Vertikales Zentrierungsproblem von div: vertikal-align:middle; Erhöhen Sie den Zeilenabstand auf die gleiche Höhe wie das Ganze DIV line-height: 200px; Fügen Sie dann den Text ein und er wird vertikal zentriert. Der Nachteil besteht darin, dass der Inhalt ohne Zeilenumbrüche gesteuert werden muss

5. Das BOX--Modell in Mozilla Firefox und IE weist inkonsistente Interpretationen auf, was zu einem Unterschied von 2 Pixeln führt. Lösung:

div{margin :30px!important;margin:28px;}

Beachten Sie, dass die Reihenfolge dieser beiden Ränder nicht umgekehrt werden darf, !important dieses Attribut Der IE kann es nicht erkennen, andere Browser können jedoch identifiziert werden. Unter IE wird es also tatsächlich so interpretiert:

div{maring:30px;margin:28px}

Wenn Sie die Definition wiederholen, wird sie gemäß der letzten ausgeführt, also Sie kann nicht einfach margin:XXpx!important schreiben;

Browserunterschiede
1. Beim Entfernen der Einrückung von ul-, ol- und anderen Listen sollte der Stil berücksichtigt werden geschrieben werden als:
list-style
:none;margin:0px;padding:0px; Das Margin-Attribut ist für IE gültig und das Padding-Attribut ist für FireFox gültig.
[Hinweis] Es wurde bestätigt, dass im IE die Einstellung „margin:0px“ die oberen, unteren, linken und rechten Einzüge, Leerzeichen sowie Listennummern oder Punkte der Liste entfernen kann Der Stil; in Firefox kann die Einstellung „margin :0px“ nur die oberen und unteren Leerzeichen entfernen. Sie müssen auch „list-style:none“ festlegen, um Listennummern oder Punkte zu entfernen. Mit anderen Worten: Im IE kann nur margin:0px festgelegt werden, um den endgültigen Effekt zu erzielen, während in Firefox margin:0px, padding:0px und list-style:none gleichzeitig festgelegt werden müssen, um den endgültigen Effekt zu erzielen.

2. CSS-Transparenzproblem

IE: filter:progid:DXImageTrans
für
m.Microsoft.Alpha(style=0,opacity=60). FF:Deckkraft:0,6. [Hinweis] Es ist am besten, beides zu schreiben und das Deckkraftattribut unten anzugeben.

3. CSS-Problem mit abgerundeten Ecken

IE: Versionen unter ie7 unterstützen keine abgerundeten Ecken.
FF: -moz-b
ord
er-radius:4px, oder -moz-border-radius-topleft:4px -moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius-bottomright:4px;. [Hinweis] Das Problem mit abgerundeten Ecken ist ein klassisches Problem in CSS. Es wird empfohlen, das JQuery
Framework zum Festlegen abgerundeter Ecken zu verwenden und diese komplexen Probleme anderen zu überlassen darüber nachdenken. Die abgerundeten Ecken von jQuery unterstützen jedoch nur die abgerundeten Ecken des gesamten Bereichs und nicht die abgerundeten Ecken dieses Randes. Ich werde es jedoch beim nächsten Mal vorstellen. 4. Cursor:Hand VS Cursor:Pointer

Problembeschreibung: Firefox unterstützt keine Hand, aber IE unterstützt Zeiger, beides sind Handanweisungen.
Lösung: Zeiger einheitlich verwenden.

Unterschiedliche Definitionen der Schriftgröße

Die Definition der Schriftgröße sm
alle
ist 13px in Firefox und 16px im IE . Lösung: Verwenden Sie die angegebene Schriftgröße, z. B. 14 Pixel.

Zwischen Divs und Divs mehrerer nebeneinander angeordneter Elemente (
Bilder
oder Links) werden Leerzeichen und Wagenrückläufe im Code in Firefox ignoriert, im IE jedoch standardmäßig angezeigt ist Platz (ca. 3px). 6. CSS-Doppellinien-Bump-Rand
IE: border:2px out
set
;. FF: -moz-border-top-colors: #d4d0c8 weiß;-moz-border-left-colors: #d4d0c8 weiß;-moz-border-right-colors:#404040 #808080;-moz-border- bottom-colors:#404040 #808080;
Browser-Fehler
1. IE-Fehler mit doppeltem Rand

Der für ein Div, das unter IE auf float eingestellt ist, festgelegte Rand wird verdoppelt. Dies ist ein Fehler, der in ie6 vorhanden ist.

Lösung: Fügen Sie display:inline

zu diesem Div hinzu:

dcb9747e38711bafad73ca1c45a03560 🎜>
Das entsprechende CSS lautet

Der folgende Inhalt wird von
zitiert:

#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/ 
} 
#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/ 
}

Es gibt zu viele Probleme in CSS, sogar im gleichen CSS Definitionen haben in verschiedenen Seitenstandards unterschiedliche Anzeigeeffekte. Ein Vorschlag, der mit der Entwicklung übereinstimmt, ist, dass die Seite unter Verwendung von Standard-XHTML-Standards geschrieben werden sollte, mit weniger Verwendung von Tabellen, und dass CSS-Definitionen so weit wie möglich auf dem Standard-DOM basieren sollten, unter Berücksichtigung gängiger Browser wie IE, Firefox und Opera. In vielen Fällen sind die CSS-Interpretationsstandards von FF und Opera näher an den CSS-Standards und normativer.

2. IE-Selektor-Leerzeichenfehler
Als ich heute den ersten Zeichenstil für den Absatzstil meines Blogs festlegte, stellte ich fest, dass ein Leerzeichen den Stil auch ungültig machen kann.

Bitte schauen Sie sich den folgenden Code an:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="//www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
<!-- 
p{font-size:12px;} 
p:first-letter{font-size:300%} 
--> 
</style> 
</head> 
<body>

e388a4556c0f65e1904146cc1a846beeFür die Welt sind Sie eine Person, aber für jemanden sind Sie seine ganze Welt. Auch wenn Sie traurig sind, runzeln Sie nicht die Stirn, denn Sie wissen nicht, wer sich in Ihr Lächeln verlieben wird. 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956
[/code]

Dieser Code definiert den ersten Zeichenstil von e388a4556c0f65e1904146cc1a846bee hat keine Auswirkungen auf IE6 (IE7 wurde nicht getestet), und zwischen p:first-letter und {font-size:300%}, also nach p:first-letter {font-size:300%}, wird ein Leerzeichen eingefügt } , die Anzeige ist normal. Aber der gleiche Code sieht unter FireFox normal aus. Logisch gesehen ist die Schreibweise von p:first-letter{font-size:300%} korrekt. Was ist also das Problem? Die Antwort ist der Bindestrich „-“ in der Pseudoklasse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="//www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
<!-- 
p{font-size:12px;} 
p:first-letter{font-size:300%} 
--> 
</style> 
</head> 
<body> 
对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。
 
 

. Im IE liegt ein Fehler vor. Wenn der Pseudoklassenname einen Bindestrich „-“ enthält, muss dem Pseudoklassennamen ein Leerzeichen folgen, andernfalls ist die Stildefinition ungültig. In FF kann es normal mit oder ohne Leerzeichen verarbeitet werden.

Das obige ist der detaillierte Inhalt vonEinführung in Multi-Browser-Kompatibilitätsprobleme und Lösungen mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!