前言

最近,接了一个客户的原生页面。客户要求该页面必须兼容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兼容性遇到的其他问题,大家如果遇到此类项目,可以借鉴使用。

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。