Solution to the problem of native PAGE compatibility with IE9

Time:2022-5-11

preface

Recently, I received a customer’s native page. The customer requires that the page must be compatible with IE9 and above browsers, and the compatibility mode of 360 browser can be accessed normally. 360 browser can force speed mode through code, which is easy to solve. However, to be compatible with IE9, many CSS3 properties and new APIs in H5 cannot be used. This paper makes a systematic summary of some IE9 compatibility problems in this project.


1、 Force 360 browsers to access in speed mode

As we all know, 360 browser has two access modes: “speed mode” and “compatibility mode”. The blink kernel is adopted in the speed mode, which is a branch of Apple’s WebKit kernel. It is developed by Google and used in Chrome browser. The compatibility mode adopts Trident kernel, which is the kernel for IE browser.

As for which version of IE is specifically compatible in the compatibility mode, you can right-click the blank position 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.
Solution to the problem of native PAGE compatibility with IE9
Due to the great difference in page content rendering between blink kernel and Trident kernel, web pages made with modern front-end technology are likely to fail to display normally in compatibility mode. To solve this problem, we can use the following code to force the page to work and render in the extreme speed mode of 360 browser.

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

2、 IE9 support for CSS3

1. Box model layout

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

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

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

(1) In the blink kernel, adding padding to div block level elements will enlarge the whole block level elements. To maintain the element’s renderings size, you need to subtract the surrounding fill size from the renderings size. The code is shown below.

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

(2) In Trident kernel, adding padding to div block level elements does not make the whole block level elements bigger. Therefore, there is no need to subtract the size of the surrounding filling. The code is shown below.

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

In view of the above differences, how to write code compatible with IE9?

CSS3 provides a box sizing property to set the layout mode of the box model. This attribute has been supported since IE8. When the value of box sizing attribute is border box, the element using this attribute does not need to subtract the filling size in the corresponding direction from the width and height of the rendering after adding the padding attribute.

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

*{box-sizing:border-box;}

Under the function of this CSS code, you can boldly layout the box model without considering compatibility.

2. IE9 support for flexible box layout

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

Here we introduce a JS library called flex native, which allows IE9 to use flex elastic box layout.

(1) Load the flex native library in the page.

<script></script>

(2) Enable the flex feature on the container where you want to use the flex box layout.

.box{
   display:flex;       // Compatible with blink kernel
   -js-display:flex;   // Compatible with Trident kernel under the function 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

4. IE9 does not support the following CSS selectors

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

3、 Support for iejquery

There are many comments on the Internet that “IE9 only supports jQuery under version 2.0”. After the modification project is completed, I upgraded the version of jQuery to 3.5.1, which is effective in the personal test. At least some jQuery selectors and methods used by the carousel and sliding door can be used.

If it is tested that IE9 does not support any selector or method above jQuery version 2.0, you can add it.

4、 IE9 does not support placeholder attribute

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

1. Solution of ordinary text box

Implementation principle: use the value attribute of text box to realize placeholder.

(1) When the text box gets the mouse focus, if the content of the text box is the text set by the placeholder property, the content of the text box will disappear.

(2) When the text box releases the mouse focus, if the content of the text box is empty, let the text box restore the text set by the placeholder property.

I use native JavaScript to complete it. With jQuery support, you can also use jQuery to implement it.

//Encapsulates functions that find DOM nodes based on class names
function $$(className){
    return document.getElementsByClassName(className);
}
//The placeholder attribute 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. Solution of password domain

Problem: for the password field, you can’t simply use the value attribute to simulate the placeholder function through the script, because the value of the value attribute displays the password mask of small dots in the password field, rather than the real text content.

Solution: by constantly changing the value of the type attribute of the password field, make the default type value of the password field text, so that the value attribute value can be displayed.

(1) When the password field gets the mouse focus, change its type attribute to password to ensure that the user cannot be seen when entering the password.

(2) When the password field releases the mouse focus, change its type attribute to text to ensure that the placeholder placeholder text is displayed.

function $$(className){
    return document.getElementsByClassName(className);
}
//The placeholder attribute 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"
            }
        })
    }
}

summary

There must be some deficiencies in the summary of IE9 compatibility. In the following articles, I will accumulate a lot of other problems encountered in IE9 compatibility. If you encounter such projects, you can use them for reference.