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

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