CSS Hack Collection Summary_Experience Exchange

Block the IE browser (that is, it will not be displayed under IE)
*:lang(zh) select {font:12px !important;} /*Special for FF*/
select:empty {font:12px !important; } /*Visible in safari*/
Select here is the selector, which can be changed according to the situation. The second sentence is unique to the Safari browser on MAC.
Only IE7 recognition

* html {…}
You can use this HACK when you need to make styles only for IE7.
Recognition of IE6 and below

* html {…}
Pay special attention to this place. Many landlords have written HACK for IE6. In fact, IE5.x can also recognize this HACK. Other browsers do not recognize it.
html/**/ >body select {……}
This sentence has the same effect as the previous sentence.
Only IE6 does not recognize it

select { display /*IE6 does not recognize it*/:none;}
The main purpose here is to separate an attribute and value through CSS comments, which are released before the colon.
Only IE6 and IE5 do not recognize it

select/**/ { display /*IE6, IE5 does not recognize it*/:none;}
The difference between this and the above sentence is that the selector and flower There is an extra CSS comment between the brackets.
Only IE5 does not recognize it

select/*IE5 does not recognize it*/ { display:none;}
This sentence is the comment in the attribute area removed from the previous sentence. Only IE5 does not recognize
Box model solution

selct {width:IE5.x width; voice-family:””}\””; voice-family:inherit; width:correct width;} The clearing method of the box model is not handled through !important. This needs to be clear.
Clear float

select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}
In Firefox, when the children are all When floating, the height of the parent cannot completely cover the entire child. Then use this HACK to clear the floating to define the parent once, which can solve this problem.
Truncation ellipsis

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
This is after exceeding the length It will automatically cut off the excess text and end it with an ellipsis, which is a very good technique. It's just that Firefox doesn't support it currently.
Only recognized by Opera

@media all and (min-width: 0px){ select {……} }
Make separate settings for the Opera browser.
The above are some HACKs in writing CSS. These are used to solve local compatibility problems. If you want to separate the compatibility content, you might as well try the following filters. Some of these filters are written in CSS to import special styles through filters, and some are written in HTML to link or import required patch styles through conditions.

The filter of IE5.x, only IE5.x is visible

@media tty {
i{content:””;/*” “*/}} @import 'ie5win .css'; /*”;}
}/* */
IE5/MAC filters are generally not needed

[Copy to clipboard] [ - ]CODE:
/ *\*//*/
@import “ie5mac.css”;
/**/
IE’s if condition Hack

Only IE
All IE can recognize
Only IE 5.0
Only IE5.0 can recognize
Only IE 5.0
IE5.0 and IE5.5 can be recognized
Only IE 6-
Only IE6 can recognize
Only IE 6/
IE6 and IE5.x below IE6 can be recognized Recognition
Only IE 7/-
Only IE7 can recognize it
The above content is definitely not comprehensive, welcome everyone to join me These techniques are all summarized to provide a convenience for future work inquiries. At the same time, I would like to thank those who have studied these HACKs.