CSS Hack writing method compatible with different browsers_html/css_WEB-ITnose

The so-called CSS Hack refers to embedding codes such as *, *html and other codes in CSS code to facilitate independent control of the specific style of a certain browser. For example, some CSS Hacks can only be recognized by IE6 or IE7, but not by browsers such as Firefox. In this way, you can effectively control the performance of CSS in different browsers and avoid writing multiple CSS files.

Mango has roughly compiled common CSS Hack writing methods here to help you better control page rendering:

1. * symbol

IE browser can recognize * symbol , but other browsers such as Firefox, Opera, Chrome, etc. cannot recognize the * symbol.

Example: Present different text colors in Firefox and IE:

color:red;*color:blue; //In non-IE core browsers such as Firefox, text Appears red; in IE it appears blue.

2. !important

IE7 can not only recognize the * symbol, but also !important, while IE6 can only recognize the former.

Example: Different text colors appear in IE6 and IE7:

color:red !important;color:blue; //In IE7 browser, the text appears red; But it appears blue in IE6.

Based on 1 and 2, using the above browser features, you can distinguish Firefox, IE7, IE6 in CSS and load different styles.
Example: Three different text colors are presented in Firefox, IE7, and IE6:

color:blue;*color:red !important;*color:green; //In Firefox, The text appears blue, in IE7 browser, appears red; in IE6, appears blue.

4. *html and *html
IE core browsers can recognize *html and *html, but non-IE core browsers such as Firefox cannot.

Example: Three different text colors are presented in Firefox, IE7, and IE6:

#div {color:red;} *html #div {color:green;} * html #div{color:blue;} //The first sentence can be recognized normally by Firefox, etc., so the text in these browsers is red; //The second sentence can be recognized and executed by IE6, and is used to write styles and text independently for IE6 Green; //Only IE7 can correctly identify the third sentence, but IE6 and other non-IE core browsers cannot, and the text is blue.