浅谈原生页面兼容IE9问题的解决方案
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
前言
最近，接了一个客户的原生页面。客户要求该页面必须兼容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- 很多地方都用到了线性渐变，比如：表单提交按钮的背景，数据展示的标题背景等等，本例使用css3：linear-gradient及ie 滤镜：filter来实现2014-06-05
- IE 添加了兼容模式，开启后会以低一版本的 IE 进行渲染，但是我就遇到了一种情况，在 IE8 下只有不使用兼容模式页面才能显示正常，下面有个不错的方法可以解决这个问题2014-01-07
css div实现的遮罩层完美兼容IE6-IE9 FireFox
css div 遮罩层想必熟悉网页的朋友都不陌生吧，网上也有相关的实现文章，不过大都对浏览器的兼容性不好，在本文将为大家介绍的是一个可以兼容IE6-IE9 FireFox 的遮罩层，感2013-10-11
最新评论