Außergewöhnlicher CSS-HACK für den FF/IE6/IE7_Experience-Austausch

Dies ist ein Artikel über CSS-HACK. Der in diesem Artikel erwähnte CSS-HACK ist ein HACK für die Attribute in Klasse und ID, und die Reihenfolge der Anordnung stellt Anforderungen. Worüber ich heute mit Ihnen sprechen möchte, ist CSS HACK für Klasse und ID.                     

Code kopieren Der Code lautet wie folgt:

.test{/*FF */
Höhe:20px;
Hintergrundfarbe:orange;
}
*+html .test{/*IE7*/
Höhe:20px;
Hintergrundfarbe:blau;
}
*html .test{/*IE6*/
Höhe:20px;
Hintergrundfarbe:schwarz;
}

Sie können dem obigen CSS-Code entnehmen, dass FF immer noch der gehorsamste Browser ist. Wenn Sie HACK in IE6 und IE7 verwenden möchten, müssen Sie das HTML-Tag voranstellen. Hier ist es leicht zu merken, dass IE6 *html hinzufügt, während IE7 *+html hinzufügt, was bedeutet, dass eine Version hinzugefügt wurde. Der Vorteil von CSS-HACK für Klasse und ID besteht darin, dass die Reihenfolge nicht berücksichtigt werden muss und es für das Management und andere Mitarbeiter einfach ist, sie zu akzeptieren. Durch diesen HACK kann auch eine ähnliche Kontrolle wie bei der JS-Browserversion erreicht werden. Der Nachteil kann sein, dass viel Code generiert wird! Okay, lass uns zuerst darüber reden.​

Nachdem Sie den obigen Inhalt gelesen haben, können Sie auf den Effekt unten klicken, um den Effekt in verschiedenen Browsern zu sehen. Orange steht für FF, Blau steht für IE7 und Schwarz steht für IE6.​

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Script Home www.jb51.net CSS-Hack</title> <style type="text/css"> *{ margin:0; padding:0; } .test{/*FF*/ height:20px; background-color:orange; } *+html .test{/*IE7*/ height:20px; background-color:blue; } *html .test{/*IE6*/ height:20px; background-color:black; } </style> <div class="test"></div>
[Strg+A, um alle auszuwählen. Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen ]