jsp页面ie9强制兼容ie8原生页面兼容IE9问题的解决计划

至于在兼容模式下，详细兼容的是IE的哪个版本，可以在360浏览器的兼容模式下，鼠标右键单击页面空缺位置，在弹出的菜单中选择“切换兼容性模式”，勾选详细的IE版本即可。

由于Blink内核和Trident内核对页面内容渲染的差异性较大，因此利用当代前端技能制作的Web页面，很有可能在兼容模式下无法正常显示。
为理解决这个问题，我们可以通过下列代码，让该页面逼迫在360浏览器的极速模式下事情并渲染。

<meta name=&#34;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代码的浸染下，可以大胆的进行盒模型布局，无需考虑兼容性。

肯定的说，IE9是不支持弹性盒布局的。
最大略的方法便是不该用Flex弹性盒布局。

这里为大家先容一个名为Flex-Native的js库，它可以让IE9利用Flex弹性盒布局。

（1）在页面中加载Flex-Native库。

<scriptsrc="https://unpkg.com/flex-native@latest"></script>

（2）在要利用弹性盒布局的容器上启用Flex功能。

.box{ display:flex; //兼容Blink内核 -js-display:flex; //在Flex-Native的浸染下兼容Trident内核}

（3）其他的Flex属性正常利用即可。

（1）text-shadow（2）transform（3）transition（4）columns（5）outline-offset（6）resize（7）border-image（8）CSS3渐变色

（1）::before（2）::after（3）::first-letter（4）::first-line

互联网上有许多关于“IE9只支持2.0版本以下的jQuery”的辞吐。
该项目完成后，我将jQuery的版本升级至了3.5.1，亲测有效。
至少轮播图、滑动门利用的部分jQuery选择器和方法是可以利用的。

如果有测试出IE9不支持jQuery 2.0版本以上的哪个选择器或方法的，可以补充进来。

HTML5设置了placeholder属性，方便的为表单元素书写文本占位符。
但是IE9不支持该属性。
办理方法可以通过编写jQuery或JavaScript原生脚本来实现。

实现事理：借助文本框的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兼容性碰着的其他问题，大家如果碰着此类项目，可以借鉴利用。