前言
最近，接了一个客户的原生页面。客户要求该页面必须兼容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属性 兼容IE9if("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属性 兼容IE9if("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兼容性遇到的其余问题，大家如果遇到此类我的项目，能够借鉴应用。