Because of the different browser to parse the page, will cause the page to display in different browsers inconsistent style, in order to maintain the unity of the page, often need to the browser compatibility issues debugging.
CSS Hack
Faced with many of the browser compatibility issues, often need to debug through CSS style, the most used is the CSS Hack. The so-called CSS hack is to write different CSS styles for different browsers, controlling the display of the browser by using a style code that is uniquely recognized by a browser. CSS hack is divided into two main categories
CSS selector hack
CSS selector hack is to control different CSS styles by adding a hack prefix that is only recognized by a specific browser in front of the CSS selector. For different versions of browsers, selector hack can be divided into the following categories:
(1) IE6 and IE6 The following versions of the identified selectors hack
When writing CSS styles, if you want this style to take effect only for browsers IE6 and IE6, you can use IE6 and the following versions of the selector hack, with the basic syntax as follows:
* HTML selector {style code}
(2) IE7 identification selector hack
When writing CSS styles, if you want this style to take effect only for IE7 browsers, you can use IE7-recognized selector hack, which has the following basic syntax:
*+html Selector {Style code}
CSS Properties hack
Here, Mr. Cockroach, attribute hack is divided into prefix attribute hack and suffix attribute hack
CSS property hack (prefix) |
The browser for |
_color:red; |
IE6 and the following versions |
*color:red; or +color:red; |
IE7 and the following versions |
CSS property hack (suffix) |
The browser for |
color:red\9; |
Ie6/ie7/ie8/ie9/ie10 version |
color:red\0; |
Ie8/ie9/ie10 version |
color:red\9\0; |
Ie9/ie10 |
Color:red!important |
Ie7/ie8/ie9/ie10 and other non-IE browsers |
In fact, now more and more companies, not so compatible with IE6, is now more concerned about the ie8.910 and other high-version browser, so here Xiao Qiang teacher also summed up the exclusive hack ie, such as IE8.
Selector hack notation |
Browser for |
@media screen\9{body {background:red;}} |
Only valid for IE6/7 |
@media \0screen {body {background:red;}} |
Only valid for IE8 |
@media \0screen\,screen\9{body {background:blue;}} |
Only valid for IE6/7/8 |
@media screen\0 {body {background:green;}} |
Only valid for IE8/9/10 |
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {body {background:orange;}} |
Only valid for IE10 |
If the style is more, the conditional comment is a good choice:
IE Conditional comment statement
IE Conditional comment statement |
Browser version for |
<!--[if LT IE 7]> content <! [endif]--> |
IE7 the following versions |
<!--[if LTE IE 7]> content <! [endif]--> |
IE7 and the following versions (including IE7) |
<!--[if GT IE 7]> content <! [endif]--> |
IE7 or later |
<!--[if GTE IE 7]> content <! [endif]--> |
IE7 and above (includes IE7) |
<!--[if! IE 7]> Content <! [endif]--> |
Non-IE7 version |
<!--[if! ie]><!--> You are not using the Internet explorer<!--<! [endif]--> |
Non-IE browser
|
Browser hack Summary of detailed browser compatibility solutions