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

  发布时间:2020-12-16 16:13:51   作者:小海前端   我要评论
这篇文章主要介绍了浅谈原生页面兼容IE9问题的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

最近,接了一个客户的原生页面。客户要求该页面必须兼容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"
            }
        })
    }
}

总结

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

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

相关文章

  • 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题
    2015-09-26
  • CSS背景色渐变写法兼容ie6至ie9

    很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,本例使用css3:linear-gradient及ie 滤镜:filter来实现
    2014-06-05
  • 借助HTML分别禁用IE8, IE9的兼容视图模式的小技巧

    IE 添加了兼容模式,开启后会以低一版本的 IE 进行渲染,但是我就遇到了一种情况,在 IE8 下只有不使用兼容模式页面才能显示正常,下面有个不错的方法可以解决这个问题
    2014-01-07
  • css div实现的遮罩层完美兼容IE6-IE9 FireFox

    css div 遮罩层想必熟悉网页的朋友都不陌生吧,网上也有相关的实现文章,不过大都对浏览器的兼容性不好,在本文将为大家介绍的是一个可以兼容IE6-IE9 FireFox 的遮罩层,感
    2013-10-11

最新评论