Ie6/ie7/ie8/firefox/chrome/safari CSS Hack compatibility checklist

Source: Internet
Author: User

Browser compatibility issues have been the former development engineer compared to the problem of headache, familiar with the rules of the inside has become simple, here is a piece of information can be shared to everyone, we usually follow this rule in the development process, will become more relaxed:

CSS hack compatibility table for each browser:

IE6 IE7 IE8 Firefox Chrome Safari
!important Y Y
_ Y
* Y Y
*+ Y
\9 Y Y Y
/ Y
Nth-of-type (1) Y Y

code example:

#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, IE8 support */color:red\0; /* IE8 support */}

Body:nth-of-type (1) p{color:red;}/* Chrome, Safari support */

Example of the overall test code:

. test{color: #000000; color: #0000FF; [Color: #00FF00; *color: #FFFF00; _color: #FF0000;}

Other Notes:

1, if your page to IE7 compatibility without problems, and do not want to modify the existing code, but also in the normal use of IE8, Microsoft claims that developers only need to add a line of code on the currently compatible IE7 site to solve the problem, this code is as follows: <meta http-equiv= " X-ua-compatible "Content=" ie=7″/>

2, Body:nth-of-type (1) If this is the case, the global lookup body will correspond to the first <body>.

3, there are other wording, such as: *html #test {} or *+html #test {}

4, *+html to IE7 hack must ensure that the HTML at the top of the following declaration:

Http://www.w3.org/TR/html4/loose.dtd

5, Order: Firefox, IE8, IE7, IE6 in turn.

Tip: What is CSS hack?

Because of different browsers, such as IE6, IE7, IE8, Firefox, and so on, the parsing of CSS is not the same, so it will result in the resulting page effect is not the same, not get the page effect we need.

At this time we need to write different CSS for different browsers, so that it can be compatible with different browsers, can be in different browsers can also get the desired page effect.

The process of writing different CSS code for different browsers is called CSS hack, also called CSS hack.

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.