Css-hack notation for mainstream browsers and comments on common conditions for IE

This article summarizes the CSS compatibility hack (mainly ie6/ie7/ie8/ff) for each browser, as well as the use of conditional annotations specific to IE.

For front-end workers, the most painful thing is browser compatibility debugging, and this most painful thing, the most perverted is Microsoft's three version ie6.0/ie7.0/ie8.0. In order for the code to work in the main browsers, we have to write the corresponding styles for each browser. This article, the Bluebird will be for you to summarize the CSS for each browser compatible hack (IE6/IE7/IE8/FF-based), and IE-specific conditional annotation use method.
First, the general way of distinguishing:
IE6, IE7 can recognize *, standard browsers (such as FF) do not recognize *;
IE6 can identify the *, but does not recognize!important;
IE7 can recognize *, can also identify!important;
IE8 can recognize the *,+,_,* and not recognize the!important;
FF does not recognize *, but can identify!important;
For example style= "*width:10px!important; width:20px;", whose width is 10px under IE7 and 20px under IE6.
There are three ways to do this:
First Kind

width:100px; /* Firefox and other browser */width:200px\0; /* IE8 can identify \0*/*width:300px!important; /*, IE7 can recognize the * number, but also can identify important */*width:400px; /* IE6 can also recognize the * number *//*mr.think tip: Please note the writing order @mrthink.net*/

The second Kind

width:100px; /* Firefox and other browser */width:200px\0; /* IE8 can identify \0*/*width:300px; /* IE7 can also identify the * number */_width:400px; /* IE6 can recognize the underscore *//*mr.think tip: Note the writing order @mrthink.net*/

Third Kind

width:100px; /* Firefox and other browser */width:200px\0; /* IE8 can identify \0*/+width:300px; /* + only identify IE7 */_width:400px; /* IE6 can recognize the underscore *//*mr.think tip: Note the writing order @mrthink.net*/

Second, uncommon Hack (op means opera,sa for Safari), where 3rd 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 recognize */4..color4{color: #F00; color /*\**/: There is a space between the #00F \9}/*ie7,ie8 recognition *//* "color" and "/*\**/" * *

Iii. hack supported independently by various browsers

width:100px\0;/* support IE8 */_width:100px; /* Support IE6 */[width:100px;/* Support ie6,7 */+width:100px;/* Support ie6,7 */*width:100px;/* Support ie6,7 */*width:100px!important e6,7, */*+width:100px; /* Support ie6,7, */*+width:100px!important;/* support ie6,7, */width:100px\9; /* Support ie6,7,8 */width:100px!important; /* Support IE6,7,8,FF */w\idth:100px; /*ie5.x does not support IE6, IE7, IE8, FF support */

Iv. rules for using HTML conditional annotations specific to IE
1. Only the IE visible wording

<!--[if ie]> here only IE visible <! [endif]–>

2. Only the IE6 visible notation

<!-–[if IE 6]> This content is only IE6.0 visible <! [endif]–->

3. Only the IE7 visible notation

<!–-[if IE 7]> This content is only IE7.0 visible <! [endif]–->

4. Version range can be displayed as a notation

<!--[if Lt IE 6]> IE6 and IE6 The following versions are recognized <! [endif]-->

<!--[if GTE IE 6]> IE6 and IE6 above are recognized <! [endif]-->

<!--[if Lt IE 7]> IE7 and IE7 The following versions are recognized <! [endif]-->

<!--[if GTE IE 7]> IE7 and IE7 above are recognized <! [endif]-->

5. Non-IE visible notation ( Note: This article does not conform to the Web standard, but it is practical )

<!--[if! Ie]> Here the content is only non-ie visible <! [endif]-->

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!