Home > Developer > JavaScript
CSS hack compatibility list of IE6/IE7/IE8/Firefox/Chrome/Safari, ie8safari
Browser compatibility has always been a headache for development engineers in the past, and it is easy to get familiar with the rules. Here is a piece of information to share with you, if you follow this rule during development, it will become much easier:
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 |
Sample Code:
# 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 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, also called CSS hack.
These are good browser versions! However, firefox chrome versions are old.
Avant browser is also very useful. The latest version is avant 2012, which features many features, is easy to use, and is fast.
Try
How to Use CSS hack in IE6, IE7, and Firefox
Previously I used this:
XML/HTML code
Background: orange;
* Background: green! Important;
* Background: blue;
Now record another method:
XML/HTML code
Height: 20px;/* For Firefox */
* Height: 25px;/* For IE7 & IE6 */
_ Height: 20px;/* For IE6 */
Note:
Tests in ie6 and firefox can be displayed normally, and hack technology is successfully applied.
But the newly released ie7 pair! Important can be correctly explained. The page cannot be displayed as required!
Now we can find a good hack Method for IE7: Use "* + html "!
Now you can use IE7 to browse it. It should be okay.
Example:
XML/HTML code
Example Source Code
# Example {color: #333;}/* Moz */
* Html # example {color: #666;}/* IE6 */
* + Html # example {color: #999;}/* IE7 */
In firefox, the font color is displayed as #333,
In IE6, the font color is displayed as #666,
In IE7, the font color is #999, and they do not interfere with each other!
This can also be done, and it is applicable to In-line writing (<div style = ".........."> ):
XML/HTML code
Width: 100px;/* Mozilla */
+ Width: 110px;/* IE7 */
_ Width: 120px;/* IE6 */
The order cannot be broken, because the more compatible the above, that is, IE6 recognizes "+ ".
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
