Browser style compatible CSS hack tips Daquan compatible

Original link click Open link Compatibility range: Ie:6.0+,firefox:2.0+,opera 10.0+,sarari 3.0+,chrome Reference:

List of common compatible tags for each tour:

Mark	IE6	IE7	IE8	FF	Opera	Sarari
[*+><]	√	√	X	X	X	X
_	√	X	X	X	X	X
\9	√	√	√	X	X	X
The	X	X	√	X	√	X
@media screen and (-webkit-min-device-pixel-ratio:0) {. bb {}}	X	X	X	X	X	√
. BB, X:-moz-any-link, X:default	X	√	X	√ (ff3.5 and below)	X	X
@-moz-document Url-prefix () {. bb{}}	X	X	X	√	X	X
@media all and (min-width:0px) {. bb {}}	X	X	X	√	√	√
* +html. BB {}	X	√	X	X	X	X
Browser kernel	Trident	Trident	Trident	Gecko	Presto	Webkit

(The above. BB can be replaced with another style name)

Note the point:

A lot of information on the Internet often!important also as a hack means, in fact, this is a misunderstanding.!important is often used by us to change styles, not to be compatible with hack. The cause of this misunderstanding is that IE6 in some cases do not actively identify!important, so often people misuse to do to identify IE6 hack. However, it is noted that IE6 is only not recognized under certain circumstances (IE6, the same style attribute is defined in the same curly brace, one of which adds important important the tag is ignored, for example: {background:red!important; Background:green;} IE6 explained as background color green, other browsers interpreted as background color red; If the same style is defined in different braces, one of the plus important will important play its normal role, for example: Div{background:red!important Div{background:green}, when all browsers are uniformly interpreted as background color red. ) Examples:

Hack application situation (i)

Scope of application: compatibility between ie:6.0,ie7.0,ie8.0

Example: In this example, we use the method of progressive recognition, and gradually exclude the part from the whole. First of all, the use of the "\9" tag, the IE browser from all cases separated. Then, again using "+" to separate IE8 and IE7, IE6, at this time, our IE8 has been independently identified.

Instance code:

. bb{
height:32px;
Background-color: #f1ee18/* All identification * *
. Background-color: #00deff \9; /*IE6, 7, 8 identification * *
+background-color: #a200ff/*ie6, 7 identification * *
_background-color: #1e0bd1;/*ie6 Identification * *
}

/* A DIV tag for the display of Class bb */< div class = "BB" ></div >

Hack application situation (II.)

Scope of application: compatibility between Ie:6.0,ie7.0,ie8.0,firefox

Example: It is easy to see that this is the context (a) of the enhanced version, applicable to the wider environment. In fact, the situation (a) has also been done to the Firefox and IE browser to distinguish between, and now we have to do is to the Firefox from other viewers to identify again. Everyone carefully look at the code, you will find that in fact, the browser recognition is very simple. How Firefox identifies. Yes, in IE, the pseudo class support is not wide, so pseudo class is a good way. (. Yourclass,x:-moz-any-link, X:default) Note that this distinguishing pseudo class is often IE7, so it is best to recognize IE7 separately, and this method is not valid for ff3.6. Firefox can be distinguished by using @-moz-document Url-prefix () {}

Instance code:

. bb{
height:32px;
Background-color: #f1ee18/* All identification * *
Background-color: #00deff \9; /*IE6, 7, 8 identification * *
+background-color: #a200ff/*ie6, 7 identification * *
_background-color: #1e0bd1;/*ie6 Identification * *
}
. 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 identification * *
* +html. Bb{background-color: #a200ff;} /* Only IE7 identification * *

/* A DIV tag for the display of Class bb */< div class = "BB" ></div >

Hack application situation (III.)

Scope of application: Compatibility between Ie:6.0,ie7.0,ie8.0,firefox,safari (Chrome)

Example Description: We will now again strengthen our CSS to enable it to identify Safari (Chrome) viewers. This is identified based on their kernel WebKit, using @media screen and (-webkit-min-device-pixel-ratio:0)

Instance code:

. bb{
height:32px;
Background-color: #f1ee18/* All identification * *
Background-color: #00deff \9; /*IE6, 7, 8 identification * *
+background-color: #a200ff/*ie6, 7 identification * *
_background-color: #1e0bd1;/*ie6 Identification * *
}
@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 identification * *
* +html. Bb{background-color: #a200ff;} /* Only IE7 identification * *

/* A DIV tag for the display of Class bb */< div class = "BB" ></div >

Hack application situation (IV.)

Scope of application: Ie:6.0+,firefox:2.0+,opera 10.0+,sarari 3.0+,chrome fully compatible

Example Description: The specific code for the instance is already listed in the example code below, and the effect is the top part of the page, and you can detect the effect with different viewers. This time we basically all the mainstream of the browser are compatible, we look at the code. Opera's recognition is partly due to the "IE8" tag, which is only recognized by the opera, and the special tags often create our broader hack. The following example of the code is more complete, you can choose the reference.

Instance code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

/***************************************** each browser compatible CSS **********************************************/
Bb{height:32px;background-color: #f1ee18/* All identification/background-color: #00deff \9/*ie6, 7, 8 identification */+background-color:# A200FF;/*IE6, 7 identification/_background-color: #1e0bd1/*ie6 Identification * */}

@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;} /* Opera only valid *}

. BB, X:-moz-any-link, X:default{background-color: #4eff00;/*ie7, Firefox3.5 and following identification */}
@-moz-document Url-prefix () {. Bb{background-color: #4eff00;/* only Firefox recognition/}}
* +html. Bb{background-color: #a200ff;} /* Only IE7 identification * *

/* Under normal circumstances, we distinguish IE7 only with +background-color with _background-color on the line if you have to write. BB, X:-moz-any-link, X:default such code distinguishes between Firefox3.5 and the following Keep in mind that this writing is also valid for IE7, so rewrite it again +background-color or use the * +html. Bb{background-color:blue;} method is valid only 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: #00deff}
. 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 recognition */+display:none/* again distinguish ie7*/}
@-moz-document Url-prefix () {#firefoxTip {display:block;/* only Firefox recognition */}}
#ChromeTip {display:none;}
@media screen and (-webkit-min-device-pixel-ratio:0) {#ChromeTip {Display:block}}} {}/* Safari (Chrome) effective */
@media all and (min-width:0px) {#ChromeTip {display:none\0}  /* only Opera valid/{} </style>