CSS compatibility of IE11 and IE11CSS

CSS compatibility of IE11 and IE11CSS

I recently tested a lot of bugs and found that they are all IE11. The browser is really Maverick. Many default styles are different from those of other browsers, and the most obvious difference is that the padding between the left and right sides of padding is usually twice as large as that of other browsers. But it is a headache when you need to modify it. If you change the original padding value, it takes effect on IE11. Other browsers have problems. So I searched the internet for the CSShack specifically for IE11, that is, the CSS style that only takes effect for IE11. Add @ media screen and (-ms-high-contrast: active) to the CSS style file, (-ms-high-contrast: none) {your style }.

For example, I set a style for a div in chrome browser.

Div {

Padding: 0 12px;

}

To achieve the above effect in IE11, you need to add a row of style under this

Div {

Padding: 0 12px;

}

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

Div {padding: 0 6px ;}

}

Note that the IE11 style should be written at the end to prevent overwriting. When the browser is IE11, the style in @ media will be executed again.

The other one is the Form Verification Section of IE11 for h5. After the verification fails, a red box will appear in the input tag, which is ugly. In this case, you only need to add an input {outline: none} for the specific input tag to remove the red border.

 

 

Update

Today, danale's direct line of code solved all of my previous IE11 compatibility issues. Not satisfied. When you encounter compatibility problems, add this line of code and try again. If you can't, follow the above method to come to TAT and paste the code.

　　　　

*{
Box-sizing: content-box;
-Moz-box-sizing: inherit;
-Webkit-box-sizing: inherit;
}