Zusammenstellung von CSS-Kompatibilitätstipps für IE- und Firefox-Browser

Autor：Eve Cole Aktualisierungszeit：2010-08-18 17:35:15

Allgemeine Tipps zur CSS-Kompatibilität

Versuchen Sie bitte, Code im xhtml-Format zu schreiben. Da DOCTYPE Auswirkungen auf die CSS-Verarbeitung hat, muss eine DOCTYPE-Anweisung hinzugefügt werden.

1. Vertikales Zentrierungsproblem von div

Vertical-Align:Middle; Erhöhen Sie den Zeilenabstand auf die gleiche Höhe wie die gesamte DIV-Zeilenhöhe:200px. Fügen Sie dann den Text ein und er wird vertikal zentriert. Der Nachteil besteht darin, dass Sie den Inhalt kontrollieren müssen und ihn nicht in eine andere Zeile einschließen dürfen.

2. Das Problem der Margenverdopplung

Der für ein auf Float eingestellte Div festgelegte Spielraum wird unter IE verdoppelt. Dies ist ein Fehler, der in ie6 vorhanden ist. Die Lösung besteht darin, display:inline; in dieses Div einzufügen.

Zum Beispiel:

<#div id=“imfloat“>
Das entsprechende CSS ist #imfloat{
float:left;
margin:5px;/*Unter IE wird es als 10px verstanden*/
display:inline;/*Unter IE wird es als 5px verstanden*/}

3. Doppelte Distanz, die durch Schweben erzeugt wird, d. h

#box{ float:left; width:100px; margin:0 0 0 100px //In diesem Fall generiert IE einen Abstand von 200px display:inline;

Lassen Sie uns im Detail über die beiden Elemente Block und Inline sprechen: Das Merkmal des Blockelements besteht darin, dass es immer in einer neuen Zeile beginnt und Höhe, Breite, Zeilenhöhe und Ränder alle gesteuert werden können (Blockelement). des Inline-Elements ist das, und andere Die Elemente befinden sich in derselben Zeile und können nicht gesteuert werden (Inline-Elemente);

#box{ display:block; //Sie können Inline-Elemente als Blockelemente simulieren display:inline; //Erzielen Sie den Effekt der Anordnung in derselben Zeile diplay:table;

4 IE-Probleme mit Breite und Höhe

IE erkennt die Definition von min- nicht, behandelt aber tatsächlich die normale Breite und Höhe so, als ob es ein Minimum gäbe. Dies ist ein großes Problem. Wenn Sie nur Breite und Höhe verwenden, ändern sich diese beiden Werte in einem normalen Browser nicht. Wenn Sie nur Mindestbreite und Höhe verwenden, werden Breite und Höhe überhaupt nicht festgelegt unter IE.

Wenn Sie beispielsweise ein Hintergrundbild festlegen möchten, ist diese Breite wichtiger. Um dieses Problem zu lösen, können Sie Folgendes tun:

#box{ width: 80px; height: 35px;}html>body { width: auto; min-width: 35px;}

5. Mindestseitenbreite

min-width ist ein sehr praktischer CSS-Befehl. Er kann festlegen, dass die Mindestbreite eines Elements nicht kleiner als eine bestimmte Breite sein darf, sodass das Layout immer korrekt ist. Der IE erkennt dies jedoch nicht und behandelt die Breite tatsächlich als Mindestbreite. Um diesen Befehl auch im IE verfügbar zu machen, können Sie ein <div> unter dem <body>-Tag einfügen, dann eine Klasse für das div angeben und dann das CSS wie folgt entwerfen:

#container{ min-width: 600px; width:exPRession(document.body.clientWidth < 600? "600px": "auto" );}

Die erste Mindestbreite ist normal; die Breite in der zweiten Zeile verwendet jedoch Javascript, das nur vom IE erkannt wird, wodurch Ihr HTML-Dokument ebenfalls weniger formal wird. Es implementiert tatsächlich die Mindestbreite durch Javascript-Beurteilung.

6. DIV-Floating-IE-Text erzeugt einen 3-Pixel-Fehler

Das Objekt auf der linken Seite wird verschoben und das rechte wird mithilfe des linken Rands des äußeren Patches positioniert. Der Text innerhalb des Objekts auf der rechten Seite wird 3 Pixel vom linken entfernt.

#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //Dieser Satz ist der Schlüssel}
<div id="box">
<div id="left">＜/div>
<div id="right">＜/div>
</div>
http://www.devdao.com/
http://yuanma.devdao.com/
7.IE-Versteckproblem

Wenn die Div-Anwendung komplex ist, gibt es in jeder Spalte einige Links, und in DIVs kann es leicht zu Versteckproblemen kommen.

Einige Inhalte können nicht angezeigt werden. Wenn die Maus diesen Bereich auswählt, wird festgestellt, dass sich der Inhalt tatsächlich auf der Seite befindet. Lösung: Verwenden Sie das Attribut „line-height“ für #layout oder verwenden Sie eine feste Höhe und Breite für #layout. Halten Sie die Seitenstruktur so einfach wie möglich.

8. Float div ist geschlossen; klare adaptive Höhe;

①Zum Beispiel: <#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" >Das NOTfloatC möchte hier nicht weiter übersetzen, sondern nach unten angeordnet werden. (Die Eigenschaften von floatA und floatB wurden auf float:left gesetzt;)

Dieser Code funktioniert im IE einwandfrei, das Problem liegt in FF. Der Grund dafür ist, dass NOTfloatC kein Float-Label ist und das Float-Label geschlossen sein muss. Fügen Sie <#div class="clear"> zwischen <#div class="floatB"> <#div class="NOTfloatC"> hinzu. Dieses Div muss auf seine Position achten und mit den beiden Divs identisch sein Float-Attribute Es darf keine verschachtelte Beziehung zwischen Ebenen geben, da sonst eine Ausnahme auftritt. Und definieren Sie den klaren Stil wie folgt: .clear{ clear:both;}

② Legen Sie die Höhe des Div nicht als externen Wrapper fest. Fügen Sie overflow:hidden im Wrapper hinzu. Die automatische Höhenanpassung ist unter IE ungültig Zeit sollte der IE mit zoom:1; ausgelöst werden, um die Kompatibilität zu erreichen.
Ein Wrapper ist beispielsweise wie folgt definiert:

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③Für den Schriftsatz ist die von uns am häufigsten verwendete CSS-Beschreibung wahrscheinlich float:left. Manchmal müssen wir einen einheitlichen Hintergrund hinter dem Float-Div in Spalte n erstellen, zum Beispiel:

Beispielsweise möchten wir den Hintergrund der Seite auf Blau einstellen, sodass die Hintergrundfarbe aller drei Spalten blau ist. Wir werden jedoch feststellen, dass die Seite tatsächlich die gleiche Höhe behält, wenn sie sich nach unten erstreckt Der Grund dafür ist, dass die Seite kein Float-Attribut ist und unsere Seite nicht auf Float gesetzt werden kann, da sie zentriert sein muss. Daher sollten wir das Problem so lösen

Die Lösung besteht darin, ein Float Left DIV mit einer Breite von 100 % einzubetten.

④Universeller Schwimmerverschluss (sehr wichtig!)

Informationen zum Prinzip des Clear Float finden Sie unter [So löschen Sie Floats ohne strukturelles Markup]. Fügen Sie den folgenden Code zu Global CSS hinzu und fügen Sie class="clearfix" zum Div hinzu, das jedes Mal geschlossen werden muss.

/* Fix löschen */
.clearfix:after { content:"."; display:block height:0;
.clearfix { display:inline-block;
/* Vor IE Mac verstecken */
.clearfix {display:block;}
/* Ausblenden vor IE Mac beenden */
/* Ende von Clearfix */

Oder stellen Sie es so ein: .hackbox{ display:table; //Zeigen Sie das Objekt als Tabelle auf Blockelementebene an}

9. Die Höhe lässt sich nicht verstellen

Die nicht adaptive Höhe bedeutet, dass die äußere Höhe nicht automatisch angepasst werden kann, wenn sich die Höhe des inneren Objekts ändert, insbesondere wenn das innere Objekt Margin oder Paddign verwendet.

Beispiel:

#box {Hintergrundfarbe:#eee;
#box p {margin-top: 20px; margin-bottom: 20px;
<div id="box">
<p>Inhalt im p-Objekt</p>
</div>

Lösung: Fügen Sie zwei leere div-Objekte über und unter dem P-Objekt hinzu: .1{height:0px;overflow:hidden;} oder fügen Sie das border-Attribut zum DIV hinzu.

10.Warum gibt es unter IE6 Lücken unter den Bildern?

Es gibt viele Techniken, um diesen Fehler zu beheben. Sie können das Layout des HTML ändern oder das IMG auf display:block oder das Vertical-Align-Attribut auf Vertical-Align:Top setzen.

Unten Mitte Text unten kann alles gelöst werden.

11. So richten Sie Text am Texteingabefeld aus

Vertical-align:middle; hinzufügen

12.Gibt es einen Unterschied zwischen ID und Klasse, die in Webstandards definiert sind?

(1). Webstandards erlauben keine wiederholten IDs. Beispielsweise darf div id="aa" nicht zweimal wiederholt werden, und class definiert eine Klasse. Theoretisch kann sie unendlich wiederholt werden, sodass Definitionen erforderlich sind Referenzen können verwendet werden.

(2).Prioritätsfrage der Attribute

Die Priorität der ID ist höher als die der Klasse, siehe obiges Beispiel

(3) Dies ist praktisch für Client-Skripte wie JS. Wenn Sie Skriptoperationen für ein Objekt auf der Seite ausführen möchten, können Sie diese nur durch Durchlaufen der Seitenelemente finden Spezifische Attribute Dies ist eine relative Zeit- und Ressourcenverschwendung, aber weitaus weniger einfach als eine ID.

13. Tipps zum Anzeigen des Inhalts in LI mit Ellipsen, nachdem er die Länge überschritten hat

Diese Technik ist auf IE- und OP-Browser anwendbar

->
</style>

14. Warum kann IE die Farbe der Bildlaufleiste nicht gemäß Webstandards einstellen?

Die Lösung besteht darin, den Textkörper durch HTML zu ersetzen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
->
＜/style>

15. Warum kann ich keinen Container mit einer Höhe von etwa 1 Pixel definieren?

Dieses Problem unter IE6 wird durch die Standardzeilenhöhe verursacht und es gibt viele Lösungstechniken, wie zum Beispiel:
Überlauf: versteckter Zoom: 0,08 Zeilenhöhe: 1 Pixel

16. Wie lässt sich die Ebene in Flash anzeigen?

Die Lösung besteht darin, Transparenz für FLASH festzulegen

17. So zentrieren Sie eine Ebene im Browser vertikal

Hier verwenden wir die prozentuale absolute Positionierung und die Technik, negative Werte außerhalb des Patches zu verwenden. Die Größe des negativen Werts ist seine eigene Breite und Höhe geteilt durch zwei.

CSS-Kompatibilitätstipps für Firefox und IE

1. Div-Zentrierungsproblem

Das Div ist bereits zentriert, wenn margin-left und margin-right auf auto eingestellt sind. Dies bedeutet, dass der Textkörper zunächst zentriert sein muss Der Inhalt innerhalb des übergeordneten Elements wird zentriert.

2. Der Rahmen und Hintergrund des Links (ein Tag)

Um einem Link eine Rahmen- und Hintergrundfarbe hinzuzufügen, müssen Sie display: block und float: left festlegen, um sicherzustellen, dass keine Zeilenumbrüche auftreten. Bezogen auf die Menüleiste dient das Festlegen der Höhe von a und der Menüleiste dazu, eine Verschiebung der Anzeige am unteren Rand zu vermeiden. Wenn die Höhe nicht festgelegt ist, kann ein Leerzeichen in die Menüleiste eingefügt werden.

3. Das Problem, dass der Hover-Stil nach dem Zugriff auf den Hyperlink nicht angezeigt wird

Der Hyperlink-Stil, auf den geklickt wurde und der nicht mehr aktiv ist, muss auf dieses Problem gestoßen sein. Die Lösung besteht darin, die Reihenfolge der CSS-Attribute zu ändern

Code:

4. Cursor-Finger-Cursor

Cursor: Der Zeiger kann gleichzeitig die Fingerform des Cursors in IE FF anzeigen, die Hand kann nur in IE angezeigt werden

5. ULs Polsterung und Rand

Das ul-Tag hat in FF standardmäßig einen Padding-Wert, aber im IE hat standardmäßig nur margin einen Wert, sodass die erste Definition von ul{margin:0;padding:0;} die meisten Probleme lösen kann.

6. FORM-Tag

Dieses Etikett hat im IE automatisch einige Ränder, während der Rand in FF 0 ist. Wenn Sie es daher konsistent anzeigen möchten, ist es am besten, Rand und Auffüllung in CSS anzugeben. Um die beiden oben genannten Probleme zu lösen, ist mein CSS im Allgemeinen , der Stil ul, form{margin:0;padding:0;} wird zuerst definiert, sodass Sie sich später nicht darum kümmern müssen.

7. Inkonsistenzproblem bei der Erklärung des BOX-Modells

Die BOX-Modellinterpretation in FF und IE ist inkonsistent, was zu einem Unterschied von 2 Pixeln führt: div{margin:30px!important;margin:28px;} Beachten Sie, dass die Reihenfolge der beiden Ränder nicht umgekehrt werden darf Wichtiges Attribut, aber Browser können es nicht erkennen. Unter IE wird es also tatsächlich so interpretiert:

Wenn div{maring:30px;margin:28px} wiederholt definiert wird, wird das letzte ausgeführt, sodass Sie nicht einfach margin:xx px!important;#box{ width:600px //for ie6.0- w schreiben können. idth:500px ; //für ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px //for ie6.0-}

8. Attributauswahl (dies kann nicht als kompatibel angesehen werden, es ist ein Fehler beim Ausblenden von CSS)

p[id]{}div[id]{}

Dies ist für IE6.0 und Versionen unter IE6.0 ausgeblendet und funktioniert in FF und Opera. Es gibt immer noch einen Unterschied zwischen Attributselektoren und Unterselektoren. Der Umfang der Unterselektoren ist in der Form reduziert, während der Attributumfang reduziert ist Selektoren sind relativ groß, z. B. p[id], alle p-Tags mit id haben den gleichen Stil.

9. Das rücksichtsloseste Mittel – !wichtig

Wenn es wirklich keine Möglichkeit gibt, einige detaillierte Probleme zu lösen, können Sie diese Technik verwenden. FF analysiert zuerst „!important“, aber IE ignoriert es wie folgt

.tabd1{
Hintergrund:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important;
Hintergrund:url(/res/images/up/tab1.gif) no-repeat 1px 0px /* Stil für IE */};

Es ist zu beachten, dass der Satz xxxx !important über einem anderen Satz stehen muss.

10. Standardwertproblem von IE und FF

Vielleicht haben Sie sich darüber beschwert, warum Sie speziell für IE und FF unterschiedliche CSS schreiben müssen, warum IE solche Kopfschmerzen bereitet, und dann, während Sie CSS schreiben, verfluchen Sie diesen verdammten M$ IE. Tatsächlich verfügt der IE nicht über die Standardunterstützung Für CSS, das wir machen, ist es so ekelhaft, wie Sie es sich vorstellen, aber der Schlüssel ist, dass die Standardwerte von IE und FF unterschiedlich sind. Sobald Sie diese Technik beherrschen, werden Sie feststellen, dass es nicht so schwierig ist, CSS zu schreiben ist mit FF und IE kompatibel. Vielleicht brauchen Sie es überhaupt nicht.“

Wir alle wissen, dass ein Browser beim Anzeigen einer Webseite anhand des CSS-Stylesheets der Webseite entscheidet, wie diese angezeigt wird. Wir beschreiben jedoch möglicherweise nicht unbedingt alle Elemente im Stylesheet und natürlich dort Dies ist nicht erforderlich. Für die nicht beschriebenen Attribute verwendet der Browser die integrierte Standardmethode zur Anzeige, z. B. Text. Wenn Sie im CSS keine Farbe angeben, verwendet der Browser Schwarz oder System Farbe, um den Hintergrund von div oder anderen Elementen anzuzeigen. Wenn sie nicht in CSS angegeben ist, setzt der Browser sie auf Weiß oder Transparent usw. für andere undefinierte Stile. Daher liegt der Hauptgrund, warum viele Dinge zwischen FF und IE unterschiedlich angezeigt werden, darin, dass ihre Standardanzeigen unterschiedlich sind. Ich weiß, ob es in w3 entsprechende Standards gibt, die dies festlegen, also gibt es keine Ich muss diesen Punkt kommentieren.

11. Warum kann der Text in FF die Höhe des Containers nicht vergrößern?

Container mit festen Höhenwerten in Standardbrowsern werden nicht wie in IE6 gestreckt. Wenn ich also eine feste Höhe haben und gestreckt werden möchte, welche Einstellungen sollte ich vornehmen? Die Lösung besteht darin, die Höhe zu entfernen und hier „min-height:200px“ festzulegen. Um IE6 zu berücksichtigen, der die „min-height“ nicht kennt, kann dies wie folgt definiert werden:

{
Höhe:auto!wichtig;
Höhe:200px;
Mindesthöhe: 200 Pixel;
}

12.Wie man fortlaufende lange Felder in Firefox automatisch umbricht

Wie wir alle wissen, können Sie im IE Word-wrap:break-word direkt verwenden. In FF verwenden wir die JS-Einfügungstechnik, um das Problem zu lösen.

<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<scrīpt type="text/javascrīpt">
/* <![CDATA[ */
Funktion toBreakWord(el, intLen){
var ōbj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+="
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */
</scrīpt>

13. Warum unterscheidet sich die Breite des Containers unter IE6 von der in FF?

Der Unterschied bei dem Problem besteht darin, ob die Gesamtbreite des Containers die Breite des Rahmens einschließt. Hier interpretiert IE6 es als 200PX, während FF es als 220PX interpretiert. Was genau verursacht das Problem? Wenn Sie die XML oben im Container entfernen, werden Sie feststellen, dass das ursprüngliche Problem hier liegt. Die Anweisung oben löst den Qurks-Modus des IE aus.

<?xml version="1.0"kodierung="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
Cursor:Zeiger;
Breite:200px;
Höhe:200px;
Rand: 10 Pixel durchgehend rot
}
->
</style>
<div ōnclick="alert(this.offsetWidth)">FireFox mit IE kompatibel machen</div>

Es gibt neue Probleme mit der CSS-Unterstützung von IE7.0, die wie folgt gelöst werden.

Der erste Typ, CSS HACK

Bpx; /*Für IE7 und IE6*/
_height:20px; /*Für IE6*/

Achten Sie auf die Reihenfolge.

Das Folgende ist ebenfalls ein CSS-HACK, aber es ist nicht so einfach wie oben.

#example { color: #333; } /* Moz */
* html #example { color: #666 } /* IE6 */
*+html #example { color: #999; } /* IE7 */

Die zweite besteht darin, IE-spezifische bedingte Kommentare zu verwenden

<link rel="stylesheet" type="text/css" href="css.css" />

<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Die dritte Methode ist die CSS-Filtermethode. Das Folgende wurde von ausländischen Websites übersetzt.

Erstellen Sie wie folgt einen neuen CSS-Stil:

#Artikel {
Breite: 200px;
Höhe: 200px;
Hintergrund: rot;
}

Erstellen Sie ein neues Div und verwenden Sie den zuvor definierten CSS-Stil:

<div id="item">hier etwas Text</div>

Fügen Sie hier in der Körperleistung das lang-Attribut hinzu, das Chinesisch ist zh:

Definieren Sie nun einen anderen Stil für das div-Element:

*:lang(en) #item{
Hintergrund:grün !wichtig;
}

Dies geschieht, um den ursprünglichen CSS-Stil mit !important zu überschreiben. Da der :lang-Selektor von IE7.0 nicht unterstützt wird, hat er keine Auswirkung auf diesen Satz. Daher wird unter IE6.0 derselbe Effekt erzielt ist sehr schwierig. Leider unterstützt Safari dieses Attribut auch nicht, daher müssen Sie den folgenden CSS-Stil hinzufügen:

#item:leer {
Hintergrund: grün !wichtig
}

Der :empty-Selektor ist eine CSS3-Spezifikation, dieses Element wird jedoch weiterhin ausgewählt. Unabhängig davon, ob dieses Element vorhanden ist, wird es jetzt in anderen Browsern als IE-Versionen angezeigt.

Aus Gründen der Kompatibilität mit IE6 und FF können Sie das vorherige !important in Betracht ziehen. Ich persönlich bevorzuge das erste, das einfach ist und eine bessere Kompatibilität aufweist.