Ie6.0/ie7.0/ie8.0. in order to make the written code run normally in various mainstream browsers, we have to write corresponding styles for various browsers. In this article, the bloggers will summarize the css Compatibility with hack (mainly ie6, ie7, ie8, and ff) for various browsers and the use of ie-specific conditional annotations.
I. General differentiation methods:
The ie series can recognize 9;
Ie6 and ie7 can recognize *, while standard browsers (such as ff) cannot recognize *;
Ie6 can recognize *, but cannot recognize it! Important;
Ie7 can recognize * and can also recognize! Important;
Ie8 can recognize and cannot recognize *, +, _, * and! Important;
Ff cannot recognize *, but can recognize it! Important;
For example, style = "* width: 10px! Important; width: 20px; ", the width in ie7 is 10px, and the width in ie6 is 20px.
There are three other methods:
First
View sourceprint? 1 width: 100px;/* firefox and other browsers */
2 width: 200px;/* ie8 recognizable */
3 * width: 300px! Important;/*, ie7 can recognize both * and important */
4 * width: 400px;/* ie6 can recognize */
5/* mr. think prompt: pay attention to the writing order @ mrthink.net */
Second
View sourceprint? 1 width: 100px;/* firefox and other browsers */
2 width: 200px;/* ie8 recognizable */
3 * width: 300px;/* ie7 can recognize */
4 _ width: 400px;/* ie6 can recognize underlines */
5/* mr. think prompt: pay attention to the writing order @ mrthink.net */
Third
View sourceprint? 1 width: 100px;/* firefox and other browsers */
2 width: 200px;/* ie8 recognizable */
3 + width: 300px;/* + only recognizes ie6 ie7 */
4 _ width: 400px;/* ie6 can recognize underlines */
5/* mr. think prompt: pay attention to the writing order @ mrthink.net */
II. Uncommon hack (op indicates opera, sa indicates safari), of which 3rd are more practical
1 .. color1 {color: # f00; color/***/: # 00f/***/}/* ie6, ie7, ie8, ff, op, sa recognition */
2. color2 {color: # f00; color/***/: # 00f/* 9 **/}/* ie7, ie8, ff, op, sa recognition */
3. color3 {color: # f00; color/***/: # 00f 9}/* ie6, ie7, ie8 recognition */
4 .. color4 {color: # f00; color/***/: #00f9}/* ie7, ie8 recognition * // * there is a space between "color" and */
3. hack supported by various browsers
Width: 100px;/* supports ie8 */
_ Width: 100px;/* supports ie6 */
[Width: 100px;/* supports ie6, 7 */
+ Width: 100px;/* supports ie6, 7 */
* Width: 100px;/* supports ie6, 7 */
* Width: 100px! Important;/* supports ie6, 7 ,*/
* + Width: 100px;/* supports ie6, 7 ,*/
* + Width: 100px! Important;/* supports ie6, 7 ,*/
Width: 100px9;/* supports ie6, 7,8 */
Width: 100px! Important;/* supports ie6, 7,8, ff */
Width: 100px;/* ie5.x does not support ie6, ie7, ie8, and ff */
IV. Rules for using html condition annotations unique to ie
1. Only visible to ie
View sourceprint? 1 The content here is only visible to ie <! [Endif]->
2. Only ie6 visible writing method
View sourceprint? 1 <! -- [If ie 6]> the content here is only visible to ie6.0 <! [Endif] -->
3. Only ie7 visible writing method
The content here is only visible to ie7.0
4. Display format of version ranges
View sourceprint? 1 ie6 and earlier versions are recognizable
View sourceprint? 1. ie6 and later versions are recognizable.