Today, when I sorted out the CSS of my website, I found that my website was distorted under Firefox. At this time, I am in a hurry.
I found a lot of information on the Internet and found that the following content is more practical: friends who are familiar with CSS must have a good understanding of CSS hack, now we are competing for Internet Explorer, Firefox browser, Chrome browser, Opera browser, and Safari browser.
Here I have sorted out the CSS hack of various browsers I have learned earlier, and provided it in a package. Haha.
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;/* supported by Firefox and IE7 */
_ Color: red;/* IE6 supported */
* Color: red;/* IE6 and IE7 */
* + Color: red;/* IE7 supported */
Color: Red \ 9;/* IE6, IE7, and IE8 support */
Color: Red \ 0;/* IE8 supported */
}
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:
* Html # test {} Or * + html # test {}
4. * + HTML must ensure that the following statements are made at the top of the HTML header for IE7 hack:
Http://www.w3.org/TR/html4/loose.dtd
5. Order: Firefox, IE8, IE7, and IE6 are arranged in sequence.
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 or CSS hack.
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
