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

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;

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

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

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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

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.

/* 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);
/* ]]> */

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.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

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

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:

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.