This is the 15th day of my participation in Gwen Challenge

preface

Recently the project is finished, the user needs to be compatible with IE, so the adjustment of compatibility is carried out. While e adjusting the side to sigh IE is really a sand sculpture. Special I encountered problems recorded, and record my solution, the following problems and solutions, are real, I personally test ~~

A, IE browser, did not reach the conditions of the scroll bar, but there is a scroll block problem

The scroll bar is just a gray square, on both sides of the scroll bar. When this happens, one of your CSS files sets overflow to Scroll, so it forces it to appear. Overflow-y: auto

The style introduced in IE browser does not take effect. Other browsers work properly

The problem is that Internet Explorer limits the resources it introduces. Limit rules to summarize:

1. Only the CSS associated with the first 31 link or style tags in the document can be applied.

2. A style tag is only valid for the first 31 @import directives.

3. A CSS file has only the first 31 valid @import directives.

4. @import supports a maximum of four levels.

5. A CSS file contains a maximum of 4095 rules.

I looked at the principle on the web, because IE9 uses 32-bit integers to identify, sort, and apply cascading rules. The 32 bits of the integer are divided into five fields, four 5-bit sheetids and a 12-bit ruleId. The 5-bit sheetID causes the 31@import limit, and the 12-bit ruleID causes the 4095 rule per copy limit.

In general, this limitation is met most of the time, probably because the development framework introduces a lot of redundant CSS, which allows the CSS needed by the page to be moved forward and the CSS not needed by the page to be moved back. You can also use the CSS merge compression mechanism.

Force IE to render the page in the latest version mode

Introducing a line of code

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Copy the code

X-ua-compatible is a proprietary attribute in IE8 that tells IE8 which version of IE to use in HTML tags to render web pages.

Edge mode tells IE to render the document in the highest mode, that is, any version of IE should be rendered in the highest standard mode supported by the current version to avoid the impact of version upgrades.

Simply put, it means that whatever version of IE is used to render in standard mode.

Chrome =1 This is not an IE simulation of Chrome, but Google’s own plugin: Google Chrome Frame(Google embedded browser Frame GCF). This plugin allows users to keep their Internet Explorer browser intact, but users actually use the Google Chrome browser kernel when browsing the web, and supports multiple versions of Internet Explorer, including IE6, 7, and 8

To use Chrome =1, install GCF and specify that pages are rendered using the Chrome kernel.

Four, IE get request error: Java lang. IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

This problem occurs because the parameters submitted by the GET connection contain special symbols or Chinese characters. Cause the browser does not recognize, did not escape.

The solution is to call the encodeURI function to escape the submitted variable once. Or use post submission.

5, IE does not set the background color

For background color transparency, we used background:unset, but found that Internet Explorer does not work, Internet Explorer 9 does not support unset. So we can use the transparent property.

Vi. The contents in the INout box under IE are not displayed completely, and shake when clicked

This is a padding problem. It may be caused by other CSS conflicts. You can add important to it to improve the priority.

IE9 does not support startWith and Endswith functions

This approach can be simulated using the substring function. You can also rewrite a function to use it yourself.

Self-implemented functions are as follows:

String.prototype.startWith = function(s) { if (s == null || s == "" || this.length == 0 || s.length > this.length) return false; if (this.substr(0, s.length) == s) return true; else return false; return true; } String.prototype.endWith = function(s) { if (s == null || s == "" || this.length == 0|| s.length > this.length) return  false; if (this.substring(this.length - s.length) == s) return true; else return false; return true; }Copy the code

IE9 does not support Flex layout

Flex layouts are more common now. Can realize the width between each other complementary. But IE doesn’t support it.

So in the case of two divs, use display:inline-block with float. You also need to define the width.