For the front-end workers, the most painful thing is browser compatibility debugging, and this most painful thing, the most abnormal than Microsoft's three versions of ie6.0/ie7.0/ie8.0. In order for the code to work correctly in all major browsers, we had to write the corresponding style for various browsers. This article, Bluebird will be for you to summarize the CSS for each browser compatible hack (mainly ie6/ie7/ie8/ff), as well as IE-specific conditional annotation use method.
common ways of distinguishing:
IE6, IE7 can recognize *, standard browser (such as FF) does not recognize *;
IE6 can recognize *, but can not identify!important;
IE7 can recognize the *, also can identify!important;
IE8 can recognize, cannot identify *,+,_,* add!important;
FF does not recognize *, but can identify!important;
For example style= "*width:10px!important width:20px;", its width is 10px under the IE7, the width is 20px under the IE6.
There are three ways to do this:
First Kind
width : px ; / * FireFox and other browsers */ width:px;/* IE8 can identify */ *width:px! Important ; / * , IE7 both can identify * number, you can also identify Important */ *width:px;/* IE6 can also identify * number */ /*mr.think Hint: Please note that the writing order @MrThink. net*/ |
Second Kind
width : px ; / * FireFox and other browsers */ width:px;/* IE8 can identify */ *width:px;/* IE7 can also identify * number */ _width:px;/* IE6 Can recognize the underline */ /*mr.think Hint: Please note that the writing order @MrThink. net*/ |
Third Kind
width : px ; / * FireFox and other browsers */ width:px;/* IE8 can identify */ +width:px;/* + identify IE7 only */ _width:px;/* IE6 Can recognize the underline */ /*mr.think Hint: Please note that the writing order @MrThink. net*/ |
Second, the unusual hack (op says Opera,sa Safari), the 3rd one is 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 recognize *//* "color" and "/***/" there is a space between * * *
three, various browser independent support hack
width:100px;/* Support IE8 * *
_width:100px; /* Support IE6 * *
[width:100px/* Support ie6,7 * *
+width:100px; /* Support ie6,7 * *
*width:100px; /* Support ie6,7 * *
*width:100px!important; * * Support ie6,7, * *
*+width:100px; * * Support ie6,7, * *
*+width:100px!important;/* Support ie6,7, * *
width:100px9; /* Support ie6,7,8 * *
Width:100px!important; /* Support IE6,7,8,FF * *
width:100px; /*ie5.x does not support IE6, IE7, IE8, FF support * *
Four, IE-specific HTML conditional annotation usage rules
1. IE can only be seen in the wording
<!--[if ie]> here only IE visible <! [endif]–> |
2. Only IE6 the visible wording
<!-–[if IE 6]> Here the content is only IE6.0 visible <! [endif]–-> |
3. Only IE7 the visible wording
<!–-[if IE 7]> Here the content is only IE7.0 visible <! [endif]–-> |
4. Version range can be displayed
<!--[if Lt IE 6]> IE6 and IE6 The following versions can be identified <! [endif]--> <!--[if GTE IE 6]> IE6 and IE6 above can be identified <! [endif]--> <!--[if Lt IE 7]> IE7 and IE7 The following versions can be identified <! [endif]--> <!--[if GTE IE 7]> IE7 and IE7 above can be identified <! [endif]--> 5. Non-IE visible writing ( Note: This article does not conform to the Web standard, but it does practical )
<!--[if! ie]> here content is only non-ie visible <! [endif]--> |