TIPS: What is CSS hack?
Different browsers, such as IE6, IE7, IE8, and Firefox, have different understandings of CSS parsing. Therefore, different page effects will be generated and the page effects we need will not be obtained.
At this time, we need to write different CSS for different browsers so that they can be compatible with different browsers at the same time, so that we can get the desired page effect in different browsers.
This process of writing different CSS codes for different browsers is called CSS hack, also called CSS hack.
For style name
If you only want IE6 to see it, use * HTML. head {color: #000;} if only IE7 is visible, use * + HTML. head {color: #000;} if only FF is visible, use: Root body. head {color: #000;} if only FF and IE8 are visible, use HTML>/**/body. head {color: #000;} if only IE6 is not visible, use HTML> body. head {color: #000;} is invalid for IE 6. If only FF and IE8 are not allowed to see it, use * body. head {color: #000;} is invalid for FF and IE8
Specific attributes
If you only want IE6 to see _. head {_ color: #000;} If you only want IE7 to see the combination of + and :. head {+ color: # f00 ;!; _ Color: #000 ;}
IE8 official hack
\ 9 "Example:" margin: 0px auto \ 9 ;". the "\ 9" here can distinguish all IE8 and Firefox. "*" IE6 and IE7 can be identified. IE8 and Firefox cannot. "_" IE6 can recognize "_". IE7, IE8, and Firefox cannot. for example :. A {color: # f00; color: # f60 \ 9; + color: #00ff00; _ color: # 0000ff;} corresponds to FF and IE8 IE7 IE6 from left to right.
-------------------------------------------------
CSS hack compatibility tables for various browsers:
| IE6 | IE7 | IE8 | Firefox | Chrome | Safari | |
| ! Important | Y | Y | ||||
| _ | Y | |||||
| * | Y | Y | ||||
| * + | Y | |||||
| \ 9 | Y | Y | Y | |||
| \ 0 | Y | |||||
| Nth-of-type (1) | Y | Y |
CodeExample:
# Test {color: red;/* all browsers support */color: red! Important;/* Firefox, IE7 support */_ color: red;/* IE6 support */* color: red;/* IE6, IE7 support */* + color: red; /* IE7 support */color: Red \ 9;/* IE6, IE7, and IE8 support */color: Red \ 0;/* IE8 support */}
Body: Nth-of-type (1) P {color: red;}/* chrome, Safari support */
Sample Code for the overall test:
. Test {color: #000000; color: # 0000ff \ 0; [color: #00ff00; * color: # FFFF00; _ color: # ff0000 ;}
Other Instructions:
1. If your page is compatible with IE7, and you do not want to modify the existing code in large quantities, and can be used properly in IE8, Microsoft claims that, the developer only needs to add a line of code to the website currently compatible with Internet Explorer 7 to solve the problem. The Code is as follows: <meta http-equiv = "X-UA-compatible" content = "Ie = 7"/>
2. Body: Nth-of-type (1) if it is written in this way, it indicates that the global search body will correspond to the first <body>.
3. There are other writing methods, such as * html # test {} Or * + html # test {}
4, * + HTML on IE7 hack must ensure that the HTML top has the following statement: http://www.w3.org/TR/html4/loose.dtd
5. Order: Firefox, IE8, IE7, and IE6 are arranged in sequence.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
