Getting ie browser compatibility solutions

Compatibility IE browser has always been headaches, famous FUCK-IE is not either substance.

The solution proposed here is used HACK, the principle is specific for different browsers to write different HTML, CSS styles, so that the various browsers to a consistent rendering.

HTML compatible wording

The HTML HACK by the comment <! - -> evolved, comment Advanced browser will not be loaded, the IE browser compatible code written in a note, IE browser will recognize.

<-! [IF IE 6]> 
　　<the p-> IE6 only know me </ the p-> 
<[endif]! ->

<-! [IF GTE IEs. 9]> 
　　<h1 of> greater than or equal IE9 browser to see </ h1 of> 
<[endif]! ->

<-! [IF lte IE 8]> 
　　<h1 class = "Red"> Your browser version is too low (IE8 and below), please update your browser! </ h1 of> 
<[endif]! ->

Above three examples are very simple, clever you can certainly give a three evils.

Then more actual application scenarios for adding some compatibility JavaScript fragment.

CSS compatible wording

Include the HACK HACK CSS and a selector attributes HACK.

To remind, set the CSS HACK pay attention to stacking of CSS styles to the same element set is compatible with the wording must be written on the back, otherwise they will be stacked away.

Only compatible with IE6 HACK (property)

HACK symbols are [-] or [_], as a prefix in front of the property, without spaces. This HACK plus sign in front of the attribute name, advanced browser and other browsers will think this is an unknown attribute does not load the property, not an error.

Color-background: Red; / * Advanced browser identification * / 
_background-Color: Pink; / * only identify IE6 * /

Compatible IE6 / 7 of the HACK (attributes)

HACK symbols can be [ `], [~], [!], [@], [#], [$], [%], [^], [&], [*], [(], [) ], [+], [=], [[], []], [|], [<], [>], [,] and [any character] in, as a prefix written before properties.

Color-background: Red; / * Advanced browser identification * / 
background-Color:! Pink; / * only IE6 / 7 Recognition * /

Only compatible with IE8 HACK (property)

HACK symbol is [\ 0 /], must be written between property values ​​and semicolons, without spaces.

Color-background: Red; / * Advanced browser identification * / 
background-Color: Pink \ 0 /; / * IE8 only identify * /

Compatible with the HACK (attributes) IE8 / 9/10 in

HACK symbol is [\ 0], it must be written between property values ​​and semicolons, without spaces.

Color-background: Red; / * Advanced browser identification * / 
background-Color: Pink \ 0; / * IE8 /. 9/10 recognition * /

Compatible IE6 / 7/8/9/10 (Properties)

HACK symbol is [\ 9], it must be written between property values ​​and semicolons, without spaces.

Color-background: Red; / * Advanced browser identification * / 
background-Color: Pink \. 9; / * IE6 /. 7 /. 8 /. 9/10 recognition * /

Compatible versions of IE6 and below (selector)

HACK is a symbol [* html], there is a space between the note and * html, plus a write-selector spaces behind.

/ * General written * / 
.box { 
    width : 200px ; 
    height : 200px ; 
    border-RADIUS : 50% ; 
    background-Color : YellowGreen ; 
} / * Compatible written * / 
* HTML .box { 
    width : 100px ; 
    height : 100px ; 
    Color-background : Skyblue ; 
}

Compatible with IE7 and below (selector) 

HACK symbol is [,], English comma, directly written on the back of the selector, no space.

.box, {
    background-color: #999;
}

There is a second, HACK is the symbol [* + html], add a space followed by the write selector.

*+html .box {
    background-color: #999;
}

Other than IE6 compatible version (selectors)

[HACK symbols are html> body], written in front of the selector, there is a space between the selector.

html>body .box {
    background-color: yellow;
}

Compatible outside IE6 / 7 version (selector)

[HACK symbols are html> / ** /} or {html ~ / ** /], there is a space between the front of the write selector, the selector.

html>/**/body .box {
    background-color: purple;
}

html~/**/body .box {
    background-color: purple;
}

These are the IE browser compatibility entry solutions. Browser compatibility has always been a big problem for the professional front-end developers is a must bravely face the challenges. For non-professional front-end developer (for example, I), a little there is to know enough.

 

"Do not frown, I go just fine."