A brief discussion on the solution to the problem of native page compatibility with IE9

Preface

Recently, I took over a client's native page. The customer requires that the page must be compatible with IE9 and above versions of the browser, and that the 360 ​​browser's compatibility mode can be accessed normally. 360 Browser can force the high-speed mode through code, and this problem is relatively easy to solve. However, to be compatible with IE9, many CSS3 properties and H5's new APIs cannot be used. This article systematically summarizes some IE9 compatibility issues that occurred in this project.

1. Force 360 ​​Browser to use high-speed mode

As we all know, 360 Browser has two access modes: "Extreme Speed ​​Mode" and "Compatibility Mode". The extreme speed mode uses the Blink kernel, which is a branch of Apple's Webkit kernel, developed by Google and used in the Chrome browser. The compatibility mode uses the Trident kernel, which is the kernel used for IE browsers.

As for which version of IE is compatible in the compatibility mode, you can right-click on a blank area of ​​the page in the compatibility mode of 360 browser, select "Switch compatibility mode" in the pop-up menu, and check the specific IE version.

Since the Blink kernel and the Trident kernel have significant differences in rendering page content, web pages made using modern front-end technology may not be displayed normally in compatibility mode. To solve this problem, we can use the following code to force the page to work and render in the 360 ​​browser's high-speed mode.

<meta name="renderer" content="webkit" />

2. IE9's support for CSS3

1. Box model layout

From the perspective of page layout, the box model calculation method of IE9's Trident kernel is different from that of the Blink kernel, which is mainly reflected in the padding attribute of the box element.

For example, a div block-level element has a width of 400px and a height of 600px in the rendering, with a 20px padding around it.

<div class="box"></div>

(1) In the Blink kernel, adding padding to a div block-level element will expand the entire block-level element. To still maintain the element's rendering size, you need to subtract the surrounding padding size from the rendering size. The code is shown below.

.box{
   width:360px; // Rendering width - left padding size - right padding size = 400px - 20px - 20px = 360px
   height:560px; // Rendering height - upper padding size - lower padding size = 600px - 20px - 20px = 560px
   padding:20px;
}

(2) In the Trident kernel, adding padding to a div block-level element does not enlarge the entire block-level element. So there is no need to subtract the size of the surrounding padding. The code is shown below.

.box{
   width:400px;
   height:600px;
   padding:20px;
}

Given the above differences, how should we solve the problem of compatibility with IE9 when writing code?

CSS3 provides a box-sizing property for setting the layout mode of the box model. This property has been supported since IE8. When the box-sizing property is set to border-box, after adding the padding property to the element using this property, there is no need to subtract the padding size in the corresponding direction from the width and height of the effect image.

Then, we only need to set the box-sizing property of all containers to border-box to unify the layout mode of the box model, which will naturally be compatible with IE9 browser. The code is shown below.

*{box-sizing:border-box;}

With this CSS code, you can boldly perform box model layout without considering compatibility.

2. IE9 supports flexible box layout

To be sure, IE9 does not support flexible box layout. The easiest way is to not use Flexbox layout.

Here I would like to introduce a js library called Flex-Native, which allows IE9 to use Flex flexible box layout.

(1) Load the Flex-Native library in the page.

<script src="https://unpkg.com/flex-native@latest"></script>

(2) Enable the Flex feature on the container where you want to use Flexbox layout.

.box{
   display:flex; //Compatible with Blink kernel -js-display:flex; //Compatible with Trident kernel under the effect of Flex-Native}

(3) Other Flex properties can be used normally.

3. IE9 does not support the following CSS3 properties

(1) text-shadow
(2) transform
(3) transition
(4) columns
(5) outline-offset
(6) resize
(7) border-image
(8) CSS3 Gradient Color

4. IE9 does not support the following CSS selectors

(1) ::before
(2) ::after
(3) ::first-letter
(4) ::first-line

3. IE9's support for jQuery

There are many comments on the Internet about "IE9 only supports jQuery below version 2.0". After completing the project, I upgraded the jQuery version to 3.5.1, and it worked. At least some of the jQuery selectors and methods used by carousels and sliding doors are available.

If you have tested which selectors or methods IE9 does not support above jQuery 2.0, please add them.

4. IE9 does not support the placeholder attribute

HTML5 sets the placeholder attribute to facilitate writing text placeholders for form elements. But IE9 does not support this property. The solution can be achieved by writing jQuery or JavaScript native scripts.

1. Solution for ordinary text box

Implementation principle: Use the value attribute of the text box to implement the placeholder.

(1) When the text box gains mouse focus, if the content of the text box is the text set by the placeholder attribute, the content of the text box disappears.
(2) When the text box releases the mouse focus, if the content of the text box is empty, the text box is restored to the text set by the placeholder attribute.

I used native JavaScript to do it, but you can also use jQuery if it supports it.

//Encapsulate the function of searching for DOM nodes based on class names function $$(className){
    return document.getElementsByClassName(className);
}
// The placeholder property of the text box is compatible with IE9
if("msDoNotTrack"in window.navigator){ //Judge whether the browser is IE9
    for(var i=0;i<$$("input").length;i++){
        var text=$$("input")[i].getAttribute("placeholder");
        $$("input")[i].value=text;
        $$("input")[i].addEventListener("focus",function(){
            if(this.value==this.getAttribute("placeholder")){
                this.value="";
            }
        })
        $$("input")[i].addEventListener("blur",function(){
            var text = this.getAttribute("placeholder");
            if(this.value==""){
                this.value=text;
            }
        })
    }
}

2. Solutions for password domain

Problem: For the password field, you cannot simply use the value attribute to simulate the placeholder function through the script, because the value of the value attribute displays a password mask of small dots in the password field instead of the actual text content.

Solution: By constantly changing the value of the type attribute of the password field, the default type value of the password field is set to text, so that the value attribute value can be displayed.

(1) When the password field gains mouse focus, change its type attribute to password to ensure that the password entered by the user cannot be seen.
(2) When the password field releases the mouse focus, change its type attribute to text to ensure that the placeholder text is displayed.

function $$(className){
    return document.getElementsByClassName(className);
}
// The placeholder property of the text box is compatible with IE9
if("msDoNotTrack" in window.navigator){    
    $$("password")[0].type="text";
    $$("password")[0].addEventListener("focus",function(){
        this.type="password";
    })
    for(var i=0;i<$$("password").length;i++){
        var text=$$("password")[i].getAttribute("placeholder");
        $$("password")[i].value=text;
        $$("password")[i].addEventListener("focus",function(){
            if(this.value==this.getAttribute("placeholder")){
                this.value="";
            }
        })
        $$("password")[i].addEventListener("blur",function(){
            var text = this.getAttribute("placeholder");
            if(this.value==""){
                this.value=text;
                this.type="text"
            }
        })
    }
}

Summarize

There must be some shortcomings in this summary of IE9 compatibility issues. In the following articles, I will accumulate a lot of other problems encountered in IE9 compatibility. If you encounter such projects, you can refer to them.

This concludes this article on the solution to the native page compatibility issue with IE9. For more information on native page compatibility with IE9, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!