Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der CSS-Hack-Sammlung_Erfahrungsaustausch

Zusammenfassung der CSS-Hack-Sammlung_Erfahrungsaustausch

WBOY
WBOYOriginal
2016-05-16 12:06:151496Durchsuche

Blockieren Sie den IE-Browser (d. h. er wird nicht im IE angezeigt)
*:lang(zh) select {font:12px !important;} /*Special for FF*/
select:empty {font: 12px !important; } /*Sichtbar in Safari*/
Hier ist select der Selektor, der je nach Situation geändert werden kann. Der zweite Satz gilt nur für den Safari-Browser auf dem MAC.
Nur ​​von IE7 erkannt

*+html {…}
Sie können diesen HACK verwenden, wenn Sie Stile nur für IE7 erstellen müssen.
Identifizierung von IE6 und darunter

* html {…}
Achten Sie besonders auf diesen Ort. Viele Vermieter haben HACK für IE6 geschrieben. Tatsächlich kann IE5.x diesen HACK auch erkennen. Andere Browser erkennen es nicht.
html/**/ >body select {……}
Dieser Satz hat die gleiche Wirkung wie der vorherige Satz.
Nur ​​IE6 erkennt es nicht

select { display /*IE6 erkennt es nicht*/:none;}
Hier trennt ein Attribut und Wert hauptsächlich durch CSS-Kommentare, die vor dem Doppelpunkt ausgegeben werden.
Nur ​​IE6 und IE5 erkennen es nicht

select/**/ { display /*IE6, IE5 erkennt nicht*/:none;}
Der Unterschied zum obigen Satz besteht darin, dass zwischen dem Selektor ein zusätzliches CSS vorhanden ist und die geschweiften Klammern Hinweis.
Nur ​​IE5 erkennt es nicht

select/*IE5 erkennt es nicht*/ { display:none;}
Dieser Satz entfernt den Kommentar im Attributbereich aus dem vorherigen Satz. Nur IE5 erkennt die
Box-Modelllösung

select {width:IE5.x width; voice-family:inherit; width:correct width;}
Die Clearing-Methode des Box-Modells wird nicht über !important abgewickelt. Das muss klar sein.
Float löschen

select:after {content:“; clear:both:hidden;}
In Firefox, wenn alle Kinder sind Beim Floating kann die Höhe des übergeordneten Elements nicht das gesamte untergeordnete Element vollständig abdecken. Verwenden Sie dann diesen HACK, um das Floating zu löschen und das übergeordnete Element einmal zu definieren, wodurch dieses Problem gelöst werden kann.
Trunkation ellipsis

select { -o-text-overflow:ellipsis; text-overflow:white-space:nowrap }
Dies geschieht nach Überschreitung der Länge Schneiden Sie den überschüssigen Text automatisch ab und beenden Sie ihn mit Auslassungspunkten, was eine sehr gute Technik ist. Es ist nur so, dass Firefox es derzeit nicht unterstützt.
Wird nur von Opera erkannt

@media all and (min-width: 0px){ select {……} }
Nehmen Sie separate Einstellungen für den Opera-Browser vor.
Die oben genannten HACKs zum Schreiben von CSS werden verwendet, um lokale Kompatibilitätsprobleme zu lösen. Wenn Sie den Kompatibilitätsinhalt trennen möchten, können Sie auch die folgenden Filter ausprobieren. Einige dieser Filter sind in CSS geschrieben, um spezielle Stile über Filter zu importieren, und andere sind in HTML geschrieben, um erforderliche Patch-Stile über Bedingungen zu verknüpfen oder zu importieren.

Filter für IE5.x, nur IE5.x ist sichtbar

@media tty {
i{content:““;/*“ „*/}} @import 'ie5win .css'; /*“;}
}/* */
IE5/MAC-Filter werden im Allgemeinen nicht benötigt

[In Zwischenablage kopieren] [ - ]CODE:
/ ** //*/
@import „ie5mac.css“;
/**/
IE's if condition Hack

Nur IE
Alle IE können erkennen
Nur ​​IE 5.0
Nur ​​IE5.0 kann erkennen
Nur ​​IE 5.0+
IE5.0 wird garantiert durch IE5.5 ersetzt Alle können erkannt werden
Nur ​​IE 6-
Nur ​​IE6 kann erkannt werden
Nur ​​IE 6/+
IE6 und IE5.x unter IE6 können erkannt werden anerkannt werden Anerkennung
Nur ​​IE 7/-
Nur ​​IE7 kann erkennen
Der oben genannte Inhalt ist definitiv nicht vollständig, um diese Fähigkeiten mit mir für zukünftige Arbeitsanfragen zusammenzufassen eine Annehmlichkeit und danken denen, die diese HACKs recherchiert haben

.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn