前言
最近，接了一个客户的原生页面。客户要求该页面必须兼容IE9及其以上版本的浏览器，同时要求 360浏览器 的兼容模式可以 正常 访问。 360 浏览器是可以通过代码强制极速模式的，这个问题比较容易解决。但是要兼容IE9，许多CSS3属性和H5新增的API都是无法使用的。本文对这个项目中出现的部分IE9兼容问题做个系统的总结。
一、强制360浏览器使用极速模式访问
大家都 知道 ，360浏览器存在两个访问模式：[极速模式]和[兼容模式]。极速模式采用Blink内核，是 苹果 公司 的 webkit 内核的一个分支，由 GOOGLE 公司研发并使用在Ch rom e浏览器中。兼容模式采用Trident内核，是用于IE浏览器的内核。
至于在兼容模式下，具体兼容的是IE的哪个版本，可以在360浏览器的兼容模式下，鼠标右键单击页面空白位置，在弹出的菜单中选择[切换兼容性模式]，勾选具体的IE版本即可。
由于Blink内核和Trident内核对 页面内容 渲染的差异性 较大 ，因此使用现代前端技 术 制作 的Web页面，很有可能在兼容模式下无法正常显示。为 了解 决这个问题，我们可以通过下列代码，让该页面强制在360浏览器的极速模式下工作并渲染。
< ;m eta n am e="renderer" content="webk IT " />
二、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
h ei ght:560px; // 效果图高度-上填充大小-下填充大小=600px-20px-20px=560px
padding:20px;
}
（2）在Trident内核中，为div块级元素添加padding填充，并不会将整个块级元素撑大。所以也无需减去四周填充的大小。代码如下所示。
.box{
width:400px;
height:600px;
padding:20px;
}
鉴于上述区别，在书写代码时要兼容IE9 应该 怎么解决呢？
CSS3提供了一个box -s izing属性，用于设置盒模型的布局模式。该属性从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@la test "></script>
（2）在要使用弹性盒布局的容器上启用Flex功能。
.box{
dis play :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 -i mage
（8）CSS3渐变色
4、IE9不支持下列CSS选择器
（1） :: before
（2）: :after
（3）:: First -letter
（4）::first-line
三、IE9对 jq uery的支持
互联网 上有许多关于[IE9只支持2.0版本以下的jQuery]的言论。改项目完成后，我将jQuery的版本升级至了3.5.1，亲测有效。至少轮播图、滑动门使用的部分jQuery选择器和方法是可以使用的。
如果有测试出IE9不支持jQuery 2.0版本以上的哪个选择器或方法的，可以补充进来。
四、IE9不支持placeholder属性
HT ML 5设置了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属性的取值在密码域中显示的是小 圆 点的密码掩码，而不是真实的文本内容。
解决方案：通过 不断 地 改变 密码域的ty PE 属性的取值，让密码域默认的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内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 浅谈原生页面兼容IE9问题的解决方案 全部内容，希望文章能够帮你解决 浅谈原生页面兼容IE9问题的解决方案 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于浅谈原生页面兼容IE9问题的解决方案的详细内容...