The browser hack summarizes detailed solutions for browser compatibility, and the hack compatibility.

The browser hack summarizes detailed solutions for browser compatibility, and the hack compatibility.

Different browsers parse different pages, which may lead to inconsistent display styles of pages in different browsers. To ensure the uniformity of pages, debugging of browser compatibility issues is often required.

CSS Hack

In the face of many browser compatibility problems, it is often necessary to debug through CSS styles, among which the most commonly used is CSS Hack. CSS Hack is used to write different CSS styles for different browsers. It controls the Display Effect of a browser by using the style code recognized by a browser. CSS Hack is mainly divided into two types:

 

CSS selector Hack

CSS selector Hack is used to control different CSS styles by adding some Hack prefixes that can only be recognized by a specific browser before the CSS selector. For browsers of different versions, the selector Hack is divided into the following categories:

(1) selector Hack identified by IE6 and earlier versions

When writing a CSS style, if you want this style to take effect only for browsers with IE6 or earlier versions, you can use the selector Hack of IE6 or earlier versions. The basic syntax is as follows:

* Html selector {style code}

(2) selector Hack recognized by IE7

When writing a CSS style, if you want this style to take effect only for the IE7 browser, you can use the selector Hack recognized by IE7. Its basic syntax is as follows:

* + Html selector {style code}

CSS attribute Hack

Here, Mr. Xiaoqiang divides the attribute hack into the prefix attribute hack and the suffix attribute hack.

CSS attribute Hack (prefix)	Target Browser
_ Color: red;	IE6 and earlier versions
* Color: red; or + color: red;	IE7 and earlier versions
CSS attribute Hack (suffix)	Target Browser
Color: red \ 9;	IE6/IE7/IE8/IE9/IE10
Color: red \ 0;	IE8/IE9/IE10
Color: red \ 9 \ 0;	IE9/IE10
Color: red! Important	IE7/IE8/IE9/IE10 and other non-ie browsers

In fact, more and more companies are not very compatible with ie6. Now they are concerned with browsers with high versions such as ie8.910. Therefore, Mr. Xiaoqiang also summarized the exclusive hack of ie, such as ie8.

Selector Hack writing	Target browsers
@ Media screen \ 9 {body {background: red ;}}	Valid only for IE6/7
@ Media \ 0 screen {body {background: red ;}}	Valid only for IE8
@ Media \ 0screen \, screen \ 9 {body {background: blue ;}}	Valid only for IE6/7/8
@ Media screen \ 0 {body {background: green ;}}	Valid only for IE8/9/10
@ Media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body {background: orange ;}}	Valid only for IE10

If there are many styles and condition annotations, it is a good choice:

IE condition comment statement

 

IE condition comment statement	Target browser version
<! -- [If lt IE 7]> content <! [Endif] -->	IE7 or earlier versions
<! -- [If lte IE 7]> content <! [Endif] -->	IE7 and earlier versions (including IE7)
<! -- [If gt IE 7]> content <! [Endif] -->	IE7 or later versions
<! -- [If gte IE 7]> content <! [Endif] -->	IE7 and later versions (including IE7)
<! -- [If! IE 7]> content <! [Endif] -->	Non-IE7 version
<! -- [If! IE]> <! --> You are not using Internet Explorer <! -- <! [Endif] -->	Non-IE browser