CSS browser compatible with hack

Compatibility scope:

IE: 6.0 +, FireFox: 2.0 +, Opera 10.0 +, Sarari 3.0 +, Chrome
References:

1. The hack method officially recommended by Microsoft in the IE condition annotation method.

Effective only under IE
<! -- [If IE]>
This text is only displayed on IE browser
<! [Endif] -->

Only effective under IE6
<! -- [If IE 6]>
This text is only displayed on IE 6 browser
<! [Endif] -->

Valid only for IE6 or later versions
<! -- [If gt IE 6]>
This text is only displayed in IE 6 or later versions.
<! [Endif] -->

It only takes effect on IE7
<! -- [If! IE 7]>
This text is displayed on a non-IE7 browser
<! [Endif] -->

Valid for non-IE browsers
<! -- [If! IE]> <! -->
This text is only displayed on non-IE browsers
<! -- <! [Endif] -->

2. Select the prefix method, that is, add a prefix that can only be recognized by a specific browser before the CSS separator.

* The html prefix takes effect only for IE6
* + The html prefix takes effect only for IE7.

Example

. Test {color: # FFF ;}
* Html. caibaojian_com {color: #000;}/* only for ie6 */
* + Html. caibaojian_com {color: # CCC;}/* only for ie7 */

3. Attribute prefixes, that is, prefix that can only be recognized by a specific browser before the style attribute name.

"_" Takes effect only for IE6
"+" Only applies to IE7
"*" Only applies to IE6 and IE7
For example:

. Caibaojian_com {color: # FFF; * color: # CCC; _ color: #000 ;}

4. Another hack method is to add some prefixes that can only be identified by a specific browser after the attribute value.

"9" IE6/IE7/IE8/IE9/IE10 all take effect
"" IE8/IE9/IE10 all take effect
"9" only applies to IE9/IE10
: Root. test {color: #963;} takes effect only for IE9/IE10
. Test {color //: #963;} // for non-IE browsers
! Important is invalid for IE6 (normally, it is valid in special cases, such as two css rewrites. If the last one is added! Important is valid for IE6)

For example:

. Caibaojian_com {color: # FFF; color: # CCC9; color: # 3FC; color: # eee9}
: Root. caibaojian_com {color: # eee}
. Test {color //: #333;} here is the code below.

. All-IE {property: value9 ;}
: Root. IE-9 {property: value /;}
. Gte-IE-8 {property: value ;}
. Lte-IE-7 {* property: value ;}
. IE-7 {+ property: value ;}
. IE-6 {_ property: value ;}
. Not-IE {property //: value ;}
@-Moz-document url-prefix () {. firefox {property: value ;}}
@ Media all and (-webkit-min-device-pixel-ratio: 0) {. webkit {property: value ;}}
@ Media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0 ){. opera {property: value ;}}
@ Media screen and (max-device-width: 480px) {. iphone-or-mobile-s-webkit {property: value ;}}

5. The button resets the css style and is compatible with ie6 and ie7.

The compatibility of the button in IE6 and IE7 requires you to recharge css to overflow: visible

6. Enable IE6 to support max-width and min-width.

. Sector {max-width: 500px; _ width: expression (documentElement. clientWidth> 500 )? "500px": "auto ");

Min-width: 300px; _ width: expression (documentElement. clientWidth <300 )? "300px": "auto ");}

 

 

(The above. bb can be changed to another style name)
Note:
Many documents on the Internet are often used! Important also serves as a hack method, which is actually a misunderstanding .! Important is often used to change styles rather than be compatible with hack. The reason for this misunderstanding is that IE6 does not identify it in some cases! Important, so often misused to identify IE6 hack. However, please note that IE6 is not recognized in some cases (in ie6, the same style attribute is defined in the same braces, when important is added, the important mark is ignored. For example: {background: red! Important; background: green;} ie6 is interpreted as the background color green, and other browsers are interpreted as the background color red. If the same style is defined in different braces, if important is added, important plays a normal role, for example, div {background: red! Important} div {background: green}. In this case, all browsers are interpreted as the background color red .)

--------------------------------------------------------------------------------

Example:
Hack application scenario (1)
Applicability: Compatibility between IE: 6.0, IE7.0, and IE8.0
Instance description:
In this example, we use the progressive recognition method to gradually exclude the local part from the whole. First, cleverly use the "9" mark to separate the IE browser from all situations. Then, use "+" to separate IE8 from IE7 and IE6. At this time, our IE8 has been independently identified.
Instance code:
. Bb {
Height: 32px;
Background-color: # f1ee18;/* All identifiers */
. Background-color: #00deff9;/* IE6, 7, 8 recognition */
+ Background-color: # a200ff;/* IE6, 7 recognition */
_ Background-color: #1e0bd1;/* IE6 recognition */
}

/* A div tag whose class is bb */
<Div class = "bb"> </div>

--------------------------------------------------------------------------------

Hack application situation (2)
Applicability: Compatibility between IE: 6.0, IE7.0, IE8.0, and Firefox
Instance description:
You can easily see that this is an enhanced version of situation (1) and is suitable for a wider environment. In fact, situation 1 has also made it possible to distinguish Firefox from IE explorer. Now we have to identify Firefox from other browsers. After you carefully read the code, you will find that the browser recognition is very simple. How does Firefox identify it? By the way, pseudo classes are not widely supported in IE, so pseudo classes are a good way. (. YourClass, x:-moz-any-link, x: default) note that IE7 can recognize pseudo classes, so it is best to identify IE7 separately, this method is invalid for ff3.6. For firefox, use @-moz-document url-prefix (){}
Instance code:
. Bb {
Height: 32px;
Background-color: # f1ee18;/* All identifiers */
Background-color: #00deff9;/* IE6, 7, 8 recognition */
+ Background-color: # a200ff;/* IE6, 7 recognition */
_ Background-color: #1e0bd1;/* IE6 recognition */
}
. Bb, x:-moz-any-link, x: default {background-color: #00ff00;}/* IE7 firefox3.5 and the following identification */
@-Moz-document url-prefix () {. bb {background-color: #00ff00 ;}/ * only firefox recognizes */
* + Html. bb {background-color: # a200ff;}/* only IE7 recognition */

/* A div tag whose class is bb */
<Div class = "bb"> </div>

--------------------------------------------------------------------------------

Hack application situation (III)
Applicability: Compatibility between IE: 6.0, IE7.0, IE8.0, Firefox, and Safari (Chrome)
Instance description:
Now we will reinforce our CSS so that it can recognize the Safari (Chrome) browser. This is identified based on their kernel webkit. Its usage is @ media screen and (-webkit-min-device-pixel-ratio: 0)
Instance code:
. Bb {
Height: 32px;
Background-color: # f1ee18;/* All identifiers */
Background-color: #00deff9;/* IE6, 7, 8 recognition */
+ Background-color: # a200ff;/* IE6, 7 recognition */
_ Background-color: #1e0bd1;/* IE6 recognition */
}
@ Media screen and (-webkit-min-device-pixel-ratio: 0 ){. bb {background-color: # f1ee18 }{}/* safari (Chrome) valid */
. Bb, x:-moz-any-link, x: default {background-color: #00ff00;}/* IE7 firefox3.5 and the following identification */
@-Moz-document url-prefix () {. bb {background-color: #00ff00 ;}/ * only firefox recognizes */
* + Html. bb {background-color: # a200ff;}/* only IE7 recognition */

/* A div tag whose class is bb */
<Div class = "bb"> </div>

--------------------------------------------------------------------------------

Hack application situation (4)
Applicability: IE: 6.0 +, FireFox: 2.0 +, Opera 10.0 +, Sarari 3.0 +, and Chrome compatibility

Instance description:
The specific code of the instance has been listed in the following instance code. You can use different browsers to check the specific effect at the top of the page. This time, we basically compatible all mainstream browsers. Let's take a look at the code. Opera's recognition is partly due to the "" Mark, which is only recognized by IE8 and Opera. The special Mark often creates a wider range of hack methods. The code in the following example is complete. You can select a reference.
Instance code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312">
<Head>
<Meta http-equiv = Content-Type content = "text/html; charset = gb2312"/>
<Style type = "text/css">
/*************************************** ** Various browsers are compatible with CSS ********************************** ************/
. Bb {height: 32px; background-color: # f1ee18;/* All identifiers */background-color: #00deff9; /* IE6, 7, 8 recognition */+ background-color: # a200ff;/* IE6, 7 recognition */_ background-color: #1e0bd1/* IE6 recognition */}

@ Media screen and (-webkit-min-device-pixel-ratio: 0 ){. bb {background-color: # f1ee18 }{}/* Safari (Chrome) valid */
@ Media all and (min-width: 0px ){. bb {background-color: # f1ee18;/* opera and Safari (Chrome) and firefox */background-color: #4cac70;}/* only Opera valid */}{}

. Bb, x:-moz-any-link, x: default {background-color: #4eff00;/* IE7, Firefox3.5, and the following recognition */}
@-Moz-document url-prefix () {. bb {background-color: #4eff00;/* only Firefox recognizes */}}
* + Html. bb {background-color: # a200ff;}/* only IE7 recognition */

/* In general, we only need to use + background-color in combination with _ background-color in IE7, if it is necessary to write. code such as bb, x:-moz-any-link, and x: default distinguishes Firefox3.5 from the following, so keep in mind that this method is also effective for IE7, therefore, you need to rewrite + background-color or use * + html. the bb {background-color: blue;} method is only valid for IE7. You can use the @-moz-document url-prefix () {} method to differentiate all firefox */

. Browsers td {width: 8%; text-align: center; padding: 8px ;}}
. Browsercolor {color: #333; font-size: 18px; font-weight: bold ;}
. Ie6 {background-color: #1e0bd1}
. Ie7 {background-color: # a200ff}
. Ie8 {background-color: #00 deff}
. Firefox {background-color: #4eff00}
. Opera {background-color: #4cac70}
. Other {background-color: # f1ee18 ;}

# TipTable td, # tipTable th {border: 1px solid black; width: 56px; height: 16px; text-align: center ;}
# WordTable td {margin-left: 8px ;}
# FirefoxTip {display: none ;}
# FirefoxTip, x:-moz-any-link, x: default {display: block;/* IE7 firefox3.5 and the following identification */+ display: none/* differentiate IE7 again */}
@-Moz-document url-prefix () {# firefoxTip {display: block;/* only firefox recognizes */}}
# ChromeTip {display: none ;}
@ Media screen and (-webkit-min-device-pixel-ratio: 0) {# ChromeTip {display: block ;}{}/ * safari (Chrome) valid */
@ Media all and (min-width: 0px) {# ChromeTip {display: none;}/* only valid for Opera */}{}
</Style>
</Head>
<Body>
<Table class = "browsers" width = "100%" cellspacing = "0" cellpadding = "0">
<Tr>
<Td> IE6 </td>
<Td> </td>
<Td> IE7 </td>
<Td> </td>
<Td> IE8 </td>
<Td> </td>
<Td> Firefox </td>
<Td> </td>
<Td> Opera </td>
<Td> </td>
<Td> Safari (Chrome) </td>
<Td> </td>
</Tr>
<Tr class = "browsercolor">
<Td class = "ie6"> IE6 </td>
<Td> </td>
<Td class = "ie7"> IE7 </td>
<Td> </td>
<Td class = "ie8"> IE8 </td>
<Td> </td>
<Td class = "firefox"> Firefox </td>
<Td> </td>
<Td class = "opera"> Opera </td>
<Td> </td>
<Td class = "other"> Safari (Chrome) </td>
<Td> </td>
</Tr>
</Table>
<Div class = "bb">
<Span style = "display: none; display: block; display: none9;"> The Identification color of Opera is dark green. Is the Opera browser very fashionable. </Span>
<Span id = "firefoxTip"> Firefox is light green, and Firefox is a powerful browser. </Span>
<Span id = "ChromeTip"> The identification colors of Safari and Chrome are golden yellow. Both Safari and Chrome use the Webkit kernel. </span>
<! -- [If IE 8]> IE8 is blue, but there are many new IE8 features. <! [Endif] -->
<! -- [If IE 7]> IE7 is purple, and IE7 can be used together! <! [Endif] -->
<! -- [If IE 6]> IE6 is identified in red, but IE6 is a little behind! <! [Endif] -->
</Div>
</Body>
</Html>

Mark	IE6	IE7	IE8	FF	Opera	Sarari
[* +> <]	& Radic;	& Radic;	X	X	X	X
_	& Radic;	X	X	X	X	X
9	& Radic;	& Radic;	& Radic;	X	X	X
	X	X	& Radic;	X	& Radic;	X
@ Media screen and (-webkit-min-device-pixel-ratio: 0 ){. Bb{}}	X	X	X	X	X	& Radic;
. Bb, X:-moz-any-link, x: default	X	& Radic;	X	& Radic; (ff3.5 and below)	X	X
@-Moz-document url-prefix (){. Bb{}}	X	X	X	& Radic;	X	X
@ Media all and (min-width: 0px ){. Bb{}}	X	X	X	& Radic;	& Radic;	& Radic;
* + Html. Bb{}	X	& Radic;	X	X	X	X
Browser kernel	Trident	Trident	Trident	Gecko	Presto	WebKit