IE11 Compatibility Issue Modification

The recent test gave me a lot of bugs, a look found all IE11. Spit it out. This browser is really a bit of a maverick. Many of the default styles are different from other browsers, and the most obvious is that the padding is often a bit larger than the other browsers. But it's a headache when it's time to change. If the original padding value is changed, then the IE11 takes effect. Another browser has a problem. So on-line search for a bit there is no specific to IE11 Csshack, is only the IE11 effective CSS style, a check is true. is to add a @media screen and (-ms-high-contrast:active) to the CSS style file, (-ms-high-contrast:none) {Inside is your style}.

For example, I set a style for a div in the Chrome browser

div{

padding:0 12px;

}

So, in the IE11 to achieve the above effect, you need to add a line below this one style

div{

padding:0 12px;

}

@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {

div{padding:0 6px;}

}

It is important to note that the IE11 style is written on the last side to prevent it from being overwritten, and when the browser is IE11, the styles in the @media are executed again.

Another one is IE11. The form Validation section for H5, after validation fails, the input label will appear a red box, which is ugly. This time you just add a input{outline:none} for the dedicated input tag, and you can remove the red border.

IE11 Compatibility Issue Modification