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

Source: Internet
Author: User
Tags comments versions

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

&lt;!--[if Lt IE 6]&gt; IE6 and IE6 The following versions can be identified &lt;! [endif]--&gt; &lt;!--[if GTE IE 6]&gt; IE6 and IE6 above can be identified &lt;! [endif]--&gt; &lt;!--[if Lt IE 7]&gt; IE7 and IE7 The following versions can be identified &lt;! [endif]--&gt; &lt;!--[if GTE IE 7]&gt; IE7 and IE7 above can be identified &lt;! [endif]--&gt; 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]-->

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.