欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈原生页面兼容IE9问题的解决方案

程序员文章站 2022-04-02 20:22:49
前言最近,接了一个客户的原生页面。客户要求该页面必须兼容ie9及其以上版本的浏览器,同时要求360浏览器的兼容模式可以正常访问。360浏览器是可以通过代码强制极速模式的,这个问题比较容易解决。但是要兼...

前言

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

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

大家都知道,360浏览器存在两个访问模式:“极速模式”和“兼容模式”。极速模式采用blink内核,是苹果公司的webkit内核的一个分支,由google公司研发并使用在chrome浏览器中。兼容模式采用trident内核,是用于ie浏览器的内核。

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

浅谈原生页面兼容IE9问题的解决方案

由于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"
            }
        })
    }
}

总结

此次总结ie9兼容性问题,一定还有不足的地方。在后面的文章中,我会大量积累ie9兼容性遇到的其他问题,大家如果遇到此类项目,可以借鉴使用。

到此这篇关于浅谈原生页面兼容ie9问题的解决方案的文章就介绍到这了,更多相关原生页面兼容ie9内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!