Iii. IE comments IE only
The advantages and disadvantages of this method are:
- Advantages: Secure, backward compatible, and easy to maintain
- Disadvantages: if it is used badly, HTTP requests will be added; if it is used well, there will be more code.
Iv. browser Detection: JS/backend program judgment // Take jQuery as an example. check whether it is IE6. If yes, add class = "ie6"
If ($. browser. msie & $. browser. version = 6 ){
$ ('Div '). addClass ('ie6 ');
} The advantages and disadvantages of this method are:
- Advantages: comprehensive, easy to maintain, and high readability
- Disadvantage: Resource occupation; large amount of code (to rewrite the selector)
The above four methods are our most commonly used methods. Now, let's take a look at the three principles in our hearts to see how to choose. Do you have time to think about it? Here is a brief introduction to my selection: 1. Try to use separate HACK In this way, the maintenance cost is relatively low, and changes will not affect other browsers. Once a browser is eliminated, the code can be removed in batches as long as you search for keywords. For example, ie6's separate hack: _ Padding: 6px ;; 2. backward compatible goals: 1 year Do you want your website to be compatible with Internet Explorer 10? No one wants to, but the predictability is too low. You can also say that the cost is too high. It is not necessary for the moment. However, IE9 may be released. Padding: 8px \ 0; This hack of IE8 + will be better if other codes are deleted without affecting backward compatibility. Moreover, if IE10 is released, once this hack is supported, this bug does not exist, the deletion may affect only two browsers, which is more convenient; 3. Save resources as much as possible If you do not consider the page loading speed or the server's capacity, you can do a perfect job in backward compatibility and elimination (from the code ), but to some extent, it is better not to do this. 5. Personal Recommendation writing In fact, there are A lot of confusions. Here we combine the types of A-Grade browsers and the types of HACK to write two methods that I think are reasonable about HACK and backward compatibility, for your reference only. Economic practical expression: Pay attention to separate HACK. There are many HACK in IE, so select the easy-to-remember attribute HACK. If there are few HACK in other browsers, select the chunk selector HACK (recommended) . Sofish {
Padding: 10px;
Padding: 9px \ 9;/* all ie */
Padding: 8px \ 0;/* The ie8-9 is currently used in IE8 separate hack, the situation is relatively less */
* Padding: 5px;/* ie6-7 */
+ Padding: 7px;/* ie7 */
_ Padding: 6px;/* ie6 */
} /* Webkit and opera */
@ Media all and (min-width: 0px) {. sofish {padding: 11px ;}} /* Webkit */
@ Media screen and (-webkit-min-device-pixel-ratio: 0) {. sofish {padding: 11px ;}} /* Opera */
@ Media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0 ){. sofish {padding: 11px ;}} /* Firefox */
@-Moz-document url-prefix () {. sofish {padding: 11px ;}/ * all firefox */
Html>/**/body. sofish, x:-moz-any-link, x: default {padding: 11px;}/* newest firefox */
Quasi-perfectionist writing: with IE comments, the selector HACK is used (selective recommendation) HTML: add body class: <! -- [If IE6] --> <! [Endif] -->
<! -- [If IE7] --> <! [Endif] -->
<! -- [If IE8] --> <! [Endif] -->
<! -- [If IE9] --> <! [Endif] -->
<! -- [If! IE] --> <! [Endif] --> . Sofish {padding: 10px ;}
. Non-ie. sofish {padding: 12px ;}
. Ie9. sofish {padding: 9px ;}
. Ie8. sofish {padding: 8px ;}
. Ie7. sofish {padding: 7px ;}
. Ie6. sofish {padding: 6px ;} /* Webkit and opera */
@ Media all and (min-width: 0px) {. sofish {padding: 11px ;}} /* Webkit */
@ Media screen and (-webkit-min-device-pixel-ratio: 0) {. sofish {padding: 11px ;}} /* Opera */
@ Media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0 ){. sofish {padding: 11px ;}} /* Firefox */
@-Moz-document url-prefix () {. sofish {padding: 11px ;}/ * all firefox */
Html>/**/body. sofish, x:-moz-any-link, x: default {padding: 11px;}/* newest firefox */
[/Css] Then, we can also find the second method. Use IE comments on the body class instead of adding separate Or@importIt will be a better choice. Although file splitting is also a good choice, but for the page loading speed, HTTP requests can not be wasted. It is not recommended to use JS or backend programs unless you have enough resources and cannot solve it (90% won't happen. Attach a table (via) for reference: 6. A comprehensive list of IE6 +/Firefox/Webkit/Opera css hack:[Cc lang = "css"]
/***** Selector Hacks ******/ /* IE6 and below */
* Html # uno {color: red} /* IE7 */
*: First-child + html # dos {color: red} /* IE7, FF, Saf, Opera */
Html> body # tres {color: red} /* IE8, FF, Saf, Opera (Everything but IE 6, 7 )*/
Html>/**/body # cuatro {color: red} /* Opera 9.27 and below, safari 2 */
Html: first-child # cinco {color: red} /* Safari 2-3 */
Html [xmlns * = ""] body: last-child # seis {color: red} /* Safari 3 +, chrome 1 +, opera9 +, ff 3.5 + */
Body: nth-of-type (1) # siete {color: red} /* Safari 3 +, chrome 1 +, opera9 +, ff 3.5 + */
Body: first-of-type # ocho {color: red} /* Saf3 +, chrome1 + */
@ Media screen and (-webkit-min-device-pixel-ratio: 0 ){
# Diez {color: red}
} /* IPhone/mobile webkit */
@ Media screen and (max-device-width: 480px ){
# Veintiseis {color: red}
} /* Safari 2-3.1 */
Html [xmlns * = ""]: root # trece {color: red} /* Safari 2-3.1, Opera 9.25 */
* Html [xmlns * = ""] # catorce {color: red} /* Everything IE6-8 */
: Root *> # quince {color: red} /* IE7 */
* + Html # dieciocho {color: red} /* Firefox only. 1 + */
# Veinticuatro, x:-moz-any-link {color: red} /* Firefox 3.0 + */
# Veinticinco, x:-moz-any-link, x: default {color: red} /***** Attribute Hacks ******/ /* IE6 */
# Once {_ color: blue} /* IE6, IE7 */
# Doce {* color: blue;/* or # color: blue */} /* Everything but IE6 */
# Diecisiete {color/**/: blue} /* IE6, IE7, IE8 */
# Diecinueve {color: blue \ 9 ;} /* IE7, IE8 */
# Veinte {color/* \ **/: blue \ 9 ;} /* IE6, IE7 -- acts as! Important */
# Veintesiete {color: blue! Ie;}/* string after! Can be anything */
I will not talk about anything else. However, note that annotations are also important. Although it is a HACK, in reality, the situation is sometimes much more complicated than imagined. It is a thousand words better to give a comment to the code. Finally, I want to see a better way! |
