CSS-Code zur Implementierung von Techniken, die mit verschiedenen Browsern kompatibel sind_Erfahrungsaustausch

Beim Schreiben von CSS-Stylesheets treten häufig Browserkompatibilitätsprobleme auf. Beispielsweise zeigen Browser mit unterschiedlichen Kerneln möglicherweise nicht die gleiche Anzeige an, und verschiedene Browserversionen können auch Probleme mit der oberen und unteren Kompatibilität aufweisen Wenn Sie sich mit der CSS-Hack-Technologie sehr gut auskennen, ist das zu einfach, aber für diejenigen, die es nicht sehr gut verstehen, ist es wirklich zu einem Problem geworden. Hier ist ein Artikel aus dem offiziellen Blog von Zhao Lei, der Tipps zur Kompatibilität mit verschiedenen Browsern enthält. Aber denken Sie nicht, dass es sich um ein Browserproblem handelt, solange es einen Fehler gibt. Ich empfehle Ihnen schließlich, die semantische Struktur zu studieren , müssen Sie zuerst Stahlstangen anbringen.

1, verschiedene Interpretationen des Box-Interpreters

Der Code lautet wie folgt:

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width 
/**/:500px; //for ie6.0-}

2, CSS in IE ausblenden, verwenden Unterauswahl html>body #box{ }
3, nur IE erkennt *html #box{ }
4, gültig in ie/win, aber versteckt in ie/max, verwenden Sie Backslash /* */
# box{ }
5, definieren Sie einen separaten Stil für ie.

6, doppelter Abstand, der durch Floating erzeugt wird, z 0 0 100px ; //In diesem Fall generiert IE einen Abstand von 200px display:inline; //Floats ignorieren}
Lassen Sie uns im Detail über die beiden Elemente Block und Inline sprechen: it befindet sich immer in einer neuen Zeile. Start, Höhe, Breite, Zeilenhöhe und Ränder können alle gesteuert werden (Blockelemente); die Eigenschaften von Inline-Elementen sind: in derselben Zeile wie andere Elemente, ... können nicht gesteuert werden (Inline). elements);
#box{ display:block; //Kann Inline-Elemente als Blockelemente simulieren display:inline; //Für ff den Effekt von simulieren Tabelle}

7, nur für oprea @media all and (min-width:0px){/* opera */#box{ }}
8, IE und das Problem von Breite und Höhe
IE erkennt die Definition von min- nicht, behandelt aber tatsächlich normale Breite und Höhe, als ob es min 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 Mindesthö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 #box{ width: auto; min-height: 35px;}
9. Mindestbreite der Seite
Min-width ist ein sehr praktischer CSS-Befehl. Er kann festlegen, dass die Mindestbreite des Elements eine bestimmte Breite nicht unterschreiten kann, um sicherzustellen, dass der Schriftsatz immer korrekt ist . Der IE erkennt dies jedoch nicht und behandelt die Breite tatsächlich als Mindestbreite. Damit dieser Befehl im IE funktioniert, können Sie ein dc6dce4a544fdca2df29d5ac0ea9906b unter dem 6c04bd5ca3fcae76e30b72ad730ca86d einfügen und dann eine Klasse für das div angeben:

Dann ist das CSS wie folgt aufgebaut: #container{ min-width: 600px; width:expression(document.body.clientWidth e84bc542d47ea69b2b3a660ce5c85447 1200? „1200px“ : „auto“;}
10, klares Floaten
.hackbox{ display:table; //Das Objekt als Tabelle auf Blockelementebene anzeigen} oder .hackbox{ clear:both;}
Oder fügen Sie Folgendes hinzu: after (Pseudoobjekt), um den Inhalt festzulegen, der nach dem Objekt auftritt. Es wird normalerweise in Verbindung mit Inhalten verwendet. IE unterstützt dieses Pseudoobjekt nicht und hat daher keine Auswirkungen IE/WIN-Browser. -------Das ist am problematischsten...

#box:after{ content: "."; display: block height: 0; clear: Both;
11, DIV-Floating-IE-Text erzeugt einen 3-Pixel-Fehler
Das Objekt auf der linken Seite ist schwebend und das rechte wird mithilfe des linken Rands des äußeren Patches positioniert. Der Text im Objekt auf der rechten Seite ist 3 Pixel vom linken entfernt. 800px;}#left{ float:left; width :50%;}#right{ width:50%;}*html #left{ margin-right:-3px //Dieser Satz ist der Schlüssel}
HTML-Codeb390322fe69e754cc2d7247050226b6d 961dd75297247cb17f67e6948fb0666816b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
12, Attributselektor (dies ist nicht kompatibel, es ist ein Fehler beim Ausblenden von CSS) p[id]{}div[id]{}
Dies ist für IE6.0 und niedrigere Versionen ausgeblendet und funktioniert mit FF und OPera

Es gibt immer noch einen Unterschied zwischen Attributselektor und Unterselektor. Der Umfang des Unterselektors ist in der Form eingeschränkt, während der Umfang des Attributselektors relativ groß ist. Beispielsweise in p[id], alle p-Tags haben alle den gleichen Stil.

Der oben genannte CSS-Code ist mit verschiedenen Browsern kompatibel. Weitere verwandte Inhalte finden Sie hier die chinesische PHP-Website (www.php.cn)!