浅谈原生页面兼容IE9问题的解决方案_浏览器兼容教程_CSS

来源：jb51　　时间：2020/12/21 14:44:32　　对本文有异议

前言

最近，接了一个客户的原生页面。客户要求该页面必须兼容IE9及其以上版本的浏览器，同时要求360浏览器的兼容模式可以正常访问。360浏览器是可以通过代码强制极速模式的，这个问题比较容易解决。但是要兼容IE9，许多CSS3属性和H5新增的API都是无法使用的。本文对这个项目中出现的部分IE9兼容问题做个系统的总结。

一、强制360浏览器使用极速模式访问

大家都知道，360浏览器存在两个访问模式：“极速模式”和“兼容模式”。极速模式采用Blink内核，是苹果公司的Webkit内核的一个分支，由Google公司研发并使用在Chrome浏览器中。兼容模式采用Trident内核，是用于IE浏览器的内核。

至于在兼容模式下，具体兼容的是IE的哪个版本，可以在360浏览器的兼容模式下，鼠标右键单击页面空白位置，在弹出的菜单中选择“切换兼容性模式”，勾选具体的IE版本即可。

由于Blink内核和Trident内核对页面内容渲染的差异性较大，因此使用现代前端技术制作的Web页面，很有可能在兼容模式下无法正常显示。为了解决这个问题，我们可以通过下列代码，让该页面强制在360浏览器的极速模式下工作并渲染。

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

二、IE9对CSS3的支持

1、盒模型布局

从页面布局角度来说，IE9的Trident内核的盒模型计算方式和Blink内核的盒模型计算方式是不一样的，这主要体现在盒元素的padding属性上。

例如：一个div块级元素在效果图中的宽度为400px，高度为600px，同时四周带有20px的填充大小。

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

（1）在Blink内核中，为div块级元素添加padding填充，会将整个块级元素撑大。若要依然保持该元素的效果图尺寸，则需要从效果图尺寸中减去周围的填充大小。代码如下所示。

.box{
   width:360px;   // 效果图宽度-左填充大小-右填充大小=400px-20px-20px=360px
   height:560px;  // 效果图高度-上填充大小-下填充大小=600px-20px-20px=560px
   padding:20px;
}

（2）在Trident内核中，为div块级元素添加padding填充，并不会将整个块级元素撑大。所以也无需减去四周填充的大小。代码如下所示。

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

鉴于上述区别，在书写代码时要兼容IE9应该怎么解决呢？

CSS3提供了一个box-sizing属性，用于设置盒模型的布局模式。该属性从IE8就开始支持了。当box-sizing属性取值为border-box时，使用了该属性的元素在添加padding属性后，就无需从效果图宽度和高度中减去相应方向的填充大小了。

那么，我们只需要让所有的容器都设置box-sizing属性为border-box即可统一盒模型的布局模式，自然也就兼容IE9浏览器了。代码如下所示。

*{box-sizing:border-box;}

大家在这句CSS代码的作用下，可以大胆的进行盒模型布局，无需考虑兼容性。

2、IE9对弹性盒布局的支持

肯定的说，IE9是不支持弹性盒布局的。最简单的方法就是不使用Flex弹性盒布局。

这里为大家介绍一个名为Flex-Native的js库，它可以让IE9使用Flex弹性盒布局。

（1）在页面中加载Flex-Native库。

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

（2）在要使用弹性盒布局的容器上启用Flex功能。

.box{
   display:flex;       //兼容Blink内核
   -js-display:flex;   //在Flex-Native的作用下兼容Trident内核
}

（3）其他的Flex属性正常使用即可。

3、IE9不支持下列CSS3属性

（1）text-shadow
（2）transform
（3）transition
（4）columns
（5）outline-offset
（6）resize
（7）border-image
（8）CSS3渐变色

4、IE9不支持下列CSS选择器

（1）::before
（2）::after
（3）::first-letter
（4）::first-line

三、IE9对jQuery的支持

互联网上有许多关于“IE9只支持2.0版本以下的jQuery”的言论。改项目完成后，我将jQuery的版本升级至了3.5.1，亲测有效。至少轮播图、滑动门使用的部分jQuery选择器和方法是可以使用的。

如果有测试出IE9不支持jQuery 2.0版本以上的哪个选择器或方法的，可以补充进来。

四、IE9不支持placeholder属性

HTML5设置了placeholder属性，方便的为表单元素书写文本占位符。但是IE9不支持该属性。解决方法可以通过编写jQuery或JavaScript原生脚本来实现。

1、普通文本框的解决方案

实现原理：借助文本框的value属性来实现占位符。

（1）当文本框获得鼠标焦点时，若文本框的内容时placeholder属性设置的文本，则让文本框内容消失。
（2）当文本框释放鼠标焦点时，若文本框的内容为空，则让文本框恢复placeholder属性设置的文本。

我用的是原生JavaScript完成的，在jQuery支持的情况下，大家也可以采用jQuery实现。

//封装根据类名查找DOM节点的函数
function $$(className){
    return document.getElementsByClassName(className);
}
// 文本框的placeholder属性 兼容IE9
if("msDoNotTrack"in window.navigator){    //判断浏览器是否为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、密码域的解决方案

产生问题：对于密码域不能单纯的使用value属性来通过脚本模拟placeholder功能，因为value属性的取值在密码域中显示的是小圆点的密码掩码，而不是真实的文本内容。

解决方案：通过不断地改变密码域的type属性的取值，让密码域默认的type取值为text，这样就可以显示value属性值了。

（1）当密码域获得鼠标焦点时，让其type属性修改为password，以保证用户输入密码时无法被看到。
（2）当密码域释放鼠标焦点时，让其type属性修改为text，以保证显示placeholder占位文本。

function $$(className){
    return document.getElementsByClassName(className);
}
// 文本框的placeholder属性 兼容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"
            }
        })
    }
}