Browser hack Summary of detailed browser compatibility solutions

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