ie9不兼容,建议使用ie9及以上版本的兼容模式

前言

　　最近收到一个客户端的原生页面。要求客户该页面必须兼容IE9及以上浏览器，并能正常访问360浏览器兼容模式。30浏览器可以通过代码强制速度模式，很容易解决。然而，为了与IE9兼容，许多CSS3属性和H5的新API不能使用。本文对该项目的一些IE9兼容性问题进行了系统的总结。

一、强制360浏览器使用极速模式访问

　　众所周知，360浏览器有两种访问模式：“极速模式”和“兼容模式”。速度模式采用Blink内核，这是苹果Webkit内核的一个分支，由谷歌开发，用于Chrome浏览器。兼容模式采用Trident内核，是针对IE浏览器的内核。

　　至于在兼容模式下具体兼容哪个版本的IE，可以在360浏览器的兼容模式下右击页面空白位置，在弹出菜单中选择“切换兼容模式”，查看具体的IE版本。

　　由于Blink内核和Trident内核在渲染页面内容上的差异，很有可能现代前端技术制作的网页在兼容模式下无法正常显示。为了解决这个问题，我们可以使用下面的代码强制页面在360浏览器的极速模式下工作和渲染。

　　meta name= renderer content= WebKit /

二、IE9对CSS3的支持

　　1、盒模型布局

　　从页面布局来看，IE9的三叉戟内核的盒子模型计算方法与Blink内核不同，主要体现在盒子元素的padding属性上。

　　例如，div块级元素在渲染中的宽度为400px，高度为600px，周围的填充大小为20px。

　　Class= box/div (1)在Blink内核中，给div块级元素添加填充会放大整个块级元素。为了保持该元素的呈现大小，需要从呈现大小中减去周围的填充大小。代码如下所示。box { width:360 px；//效果图宽度-左填充尺寸-右填充尺寸=400px-20px-20px=360px高度：560px//效果图高度-上填充尺寸-下填充尺寸=600px-20px-20px=560px填充：20px；}(2)在Trident内核中，给div块级元素添加填充不会放大整个块级元素。所以不需要减去周围填充的大小。代码如下所示。box { width:400 px；高度：600px填充：20px}鉴于以上差异，写代码时应该怎么做才能兼容IE9？

　　CSS3提供了一个盒子大小属性，用于设置盒子模型的布局模式。从IE8开始就支持这个属性。当box-sizing属性的值为border-box时，添加padding属性后，使用该属性的元素不需要从渲染的宽度和高度中减去相应方向的填充大小。

　　那么，我们只需要让所有的容器都将box-sizing属性设置为border-box来统一盒子模型的布局方式，自然也就兼容了IE9浏览器。代码如下所示。

　　* {框大小：边框-框；}在这段CSS代码的作用下，可以大胆布局盒子模型，不考虑兼容性。

　　2、IE9对弹性盒布局的支持

　　可以肯定的是，IE9不支持灵活的盒子布局。最简单的方法是不要使用Flex弹性框布局。

　　这里有一个叫Flex-Native的js库，允许IE9使用Flex弹性框布局。

　　(1)在页面中加载Flex-Native库。

　　script= 3359unpkg.com/Flex-native @最新/script (2)在你想要使用弹性框布局的容器上启用Flex功能。box { display:flex；//兼容Blink kernel-js-display:flex；//在Flex-Native的作用下兼容Trident内核}(3)其他Flex属性可以正常使用。

　　3、IE9不支持下列CSS3属性

　　(1)文本-阴影

　　(2)改造

　　(3)过渡

　　(4)列

　　(5)轮廓偏移

　　(6)调整大小

　　(7)边界图像

　　(8)CSS3渐变

　　4、IE9不支持下列CSS选择器

　　(1):之前

　　(2):之后

　　(3):首字母

　　(4):第一行

三、IE9对jQuery的支持

　　网上有很多关于“IE9只支持2.0版本以下的jQuery”的评论。项目完成后，我将jQuery的版本升级到了3.5.1，亲测有效。至少可以使用carousel和滑动门使用的一些jQuery选择器和方法。

　　如果有任何在JQuery版以上IE9不支持的选择器或方法，可以添加。

四、IE9不支持placeholder属性

　　 HTML5设置placeholder属性，便于为表单元素编写文本占位符。但是，IE9不支持该属性。解决方案可以通过编写jQuery或者JavaScript原生脚本来实现。

　　1、普通文本框的解决方案

　　实现原理：占位符是通过文本框的value属性实现的。

　　(1)当文本框获得鼠标焦点时，如果文本框的内容是placeholder属性设置的文本，则让文本框的内容消失。

　　(2)当文本框释放鼠标焦点时，如果文本框内容为空，则让文本框恢复占位符属性设置的文本。

　　我用原生JavaScript来完成，你也可以在jQuery的支持下用jQuery来实现。

　　//封装函数function $ $(class name){ return document . getelementsbyclassname(class name))根据类名查找DOM节点；}//文本框的占位符属性兼容IE9IF( msdonottrack in window . navigator){//判断浏览器是否为IE9 for(var I=0；我$$(输入)。长度；i ){ var text=$$(input)[i]。getAttribute(“占位符”)；$$(input)[i]。值=文本；$$(input)[i]。addEventListener(focus ，function(){ if(this . value==this . get attribute( placeholder ){ this . value= ；} }) $$(input)[i]。addEventListener(blur ，function(){ var text=this . get attribute( placeholder )；if(this . value== ){ this . value=text；} }) }}2、密码域的解决方案

　　问题出现了：不能简单地用value属性通过脚本对password字段模拟占位符函数，因为value属性的值显示的是password字段中点的密码掩码，而不是真正的文本内容。

　　解决方法：通过不断改变密码字段的type属性值，使密码字段的默认值为文本，这样就可以显示value属性值。

　　(1)当密码字段获得鼠标焦点时，让其type属性改为password，保证用户输入密码时看不到。

　　(2)当密码字段释放鼠标焦点时，将其type属性修改为text，以确保显示占位符文本。

　　函数$$(类名){ return document . getelementsbyclassname(类名)；}//文本框的占位符属性兼容IE9IF( window . navigator中的 msdonottrack ){ $ $( password )[0]。type= text$$(密码)[0]。addEventListener(focus ，function(){ this . type= password )；})for(var I=0；我$$(密码)。长度；i ){ var text=$$(password)[i]。getAttribute(“占位符”)；$$(password)[i]。值=文本；$$(password)[i]。addEventListener(focus ，function(){ if(this . value==this . get attribute( placeholder ){ this . value= ；} }) $$(密码)[i]。addEventListener(blur ，function(){ var text=this . get attribute( placeholder )；if(this . value== ){ this . value=text；this . type= text } } }

总结

　　这个关于IE9兼容性的总结肯定有不足之处。在后面的文章中，我会积累很多IE9兼容中遇到的其他问题。如果遇到这样的项目，可以借鉴一下。

　　关于原生页面兼容IE9的解决方案的这篇文章到此为止。更多与IE9相关的原生页面兼容性，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。