CSS Hack Summary Quick Reference Manual Browser Compatibility Must Be Known_Experience Exchange

Block IE browser (that is, not displayed in IE)

Copy code The code is as follows:

*:lang(zh) select {font:12px !important;} /*FF Visible, special statement: Due to the latest update of Opera, this sentence has now become a special HACK 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 recognized by IE7

Copy code The code is as follows:

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

Identification for IE6 and below

Copy code The code is as follows:

* html {…}
You should 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

Copy code The code is as follows:

select { display /*IE6 does not recognize*/: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

Copy code The code is as follows:

select/**/ { display /*IE6, IE5 does not recognize */:none;}
The difference between this and the above sentence is that there is an additional CSS comment between the selector and the curly braces.

Only IE5 does not recognize it

Copy code The code is as follows:

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

box model solution

Copy code The code is as follows:

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

Copy code The code is as follows:

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
In Firefox, when the children are all floating, the height of the parent cannot be Completely wrap the entire child, then use this floating HACK to define the parent once, then this problem can be solved.

Truncation ellipsis

Copy code The code is as follows:

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
This is to automatically cut off the excess text after it exceeds the length. , and ends with an ellipsis, a good technique. It's just that Firefox doesn't support it currently.

Only recognized by Opera

Copy code The code is as follows:

@media all and (min-width: 0px){ select {……} }
Make separate settings for Opera browser. The above are some HACKs in writing CSS. These are used to solve local compatibility issues. 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.

Filter for IE5.x, only IE5.x is visible

Copy code The code is as follows:

@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */

IE5/MAC filters are generally not needed

Copy code The code is as follows:

/*\*//*/
@import "ie5mac.css";
/**/

IE's if condition Hack

Copy code The code is as follows:

All IE can recognize

Only IE5.0 can recognize it

Only IE6 can be recognized

IE6 and IE5.x below IE6 can recognize

Only IE7 can recognize the above content may not be comprehensive. Welcome everyone to join me in summarizing these skills for It will provide a convenience for future work inquiries. At the same time, I would like to thank the authors who have developed these HACKs.