当前位置:网站首页>The solution of IE9 compatible native PAGE

The solution of IE9 compatible native PAGE

2020-12-07 10:52:51 Front end of Xiaohai

Preface

lately , A client's native page . The customer requires that the page be compatible with IE9 And above browsers , Simultaneous requirements 360 Browser compatibility mode can be accessed normally .360 Browsers can force speed mode through code , This problem is easier to solve . But be compatible with IE9, many CSS3 Properties and H5 Newly added API They can't be used . This article focuses on the parts that appear in this project IE9 Make a systematic summary of compatibility issues .


One 、 mandatory 360 Browsers use speed mode to access

Everybody knows ,360 The browser has two access modes :“ Speed mode ” and “ Compatibility mode ”. Speed mode uses Blink kernel , It's Apple's Webkit A branch of the kernel , from Google The company develops and uses in Chrome Browser . Compatibility mode adopts Trident kernel , Is used for IE Browser kernel .

As for compatibility mode , The specific compatibility is IE Which version of , Can be in 360 Browser compatibility mode , Right click on the blank position of the page , Select from the pop-up menu “ Switch compatibility mode ”, Check specific IE Version can .
 Insert picture description here
because Blink Kernel and Trident The difference of the content rendering of the kernel is big , So it's made with modern front-end technology Web page , It is very likely that it will not display normally in compatibility mode . To solve this problem , We can use the following code , Let the page be forced in 360 Work and render in browser speed mode .

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

Two 、IE9 Yes CSS3 Support for

1、 Box model layout

From the perspective of page layout ,IE9 Of Trident The box model of kernel and Blink The box model of kernel is different , This is mainly reflected in the box element padding Attribute .

for example : One div The width of block level elements in the rendering is 400px, The height is 600px, At the same time, it has 20px Fill size of .

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

(1) stay Blink The kernel , by div Block level elements add padding fill , It will enlarge the whole block level element . To keep the rendering size of the element , You need to subtract the size of the surrounding fill from the size of the rendering . The code is as follows .

.box{
   width:360px;   //  Effect picture width - Left fill size - Right fill size =400px-20px-20px=360px
   height:560px;  //  Rendering height - Top fill size - Bottom fill size =600px-20px-20px=560px
   padding:20px;
}

(2) stay Trident The kernel , by div Block level elements add padding fill , It doesn't enlarge the whole block level element . So there's no need to subtract the size of the fill around . The code is as follows .

.box{
   width:400px;
   height:600px;
   padding:20px;
}
In view of the above differences , When writing code, be compatible with IE9 How to solve it ?

CSS3 Provides a box-sizing attribute , Used to set the layout mode of the box model . This property from IE8 I started to support . When box-sizing The property value is border-box when , The element that uses this attribute is adding padding After attribute , There is no need to subtract the fill size in the corresponding direction from the width and height of the rendering .

that , Let's just set up all the containers box-sizing The attribute is border-box That is to unify the layout pattern of the box model , Naturally, it's compatible with IE9 Browser . The code is as follows .

*{box-sizing:border-box;}

Everybody in this sentence CSS Under the action of code , Can boldly carry out box model layout , No need to consider compatibility .

2、IE9 Support for flexible box layout

Definitely ,IE9 Elastic box layout is not supported . The easiest way is not to use it Flex Elastic box layout .

Here is an introduction called Flex-Native Of js library , It can make IE9 Use Flex Elastic box layout .

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

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

(2) Enable... On the container where you want to use the elastic box layout Flex function .

.box{
   display:flex;       // compatible Blink kernel 
   -js-display:flex;   // stay Flex-Native Compatible with Trident kernel 
}

(3) Other Flex Property can be used normally .

3、IE9 The following is not supported CSS3 attribute

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

4、IE9 The following is not supported CSS Selectors

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

3、 ... and 、IE9 Yes jQuery Support for

There are many things about... On the Internet “IE9 Only support 2.0 Under version jQuery” In the speech . After the project is completed , I will jQuery Has been upgraded to 3.5.1, Close test effectively . At least the carousel 、 The part of a sliding door jQuery Selectors and methods are available .

If there is a test IE9 I won't support it jQuery 2.0 Which selector or method is above version , It can be added that .

Four 、IE9 I won't support it placeholder attribute

HTML5 Set up placeholder attribute , Easy to write text placeholders for form elements . however IE9 The property is not supported . The solution can be by writing jQuery or JavaScript Native scripts to implement .

1、 The solution for plain text boxes

Realization principle : With the help of a text box value Property to implement the placeholder .

(1) When the text box gets the mouse focus , If the content of the text box is placeholder Property setting text , Let the text box disappear .

(2) When the text box releases the mouse focus , If the content of the text box is empty , Let the text box recover placeholder Property setting text .

I'm using native JavaScript Accomplished , stay jQuery In support of , You can also use jQuery Realization .

// Encapsulation finds... By class name DOM Function of node 
function $$(className){
    return document.getElementsByClassName(className);
}
//  Text box placeholder attribute   compatible IE9
if("msDoNotTrack"in window.navigator){    // Determine 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、 Domain password solutions

A problem : You can't just use the password field value Property to simulate placeholder function , because value The value of the attribute in the password field shows the password mask of the small dot , Not the real text .

Solution : By constantly changing the password field type Value of attribute , Let the password field default to type The value is text, This will show value Property value .

(1) When the password field gets the mouse focus , Let it type Property changed to password, To ensure that the user cannot be seen when entering the password .

(2) When the password field releases the mouse focus , Let it type Property changed to text, To ensure that placeholder Placeholder text .

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

This summary IE9 Compatibility issues , There must be some inadequacies . In a later article , I will accumulate a lot of IE9 Other compatibility issues , If you encounter this kind of project , It can be used for reference .

版权声明
本文为[Front end of Xiaohai]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/20201207105119135m.html