原生页面兼容IE9的解决方法

(1)在Blink内核中，给div块级元素添加padding会扩展整个块级元素。为了仍然保持元素的渲染大小，需要从渲染大小中减去周围的填充大小。代码如下所示。.box{宽度:360px;//效果图宽度-左内边距大小-右内边距大小=400px-20px-20px=360pxheight:560px;//效果图高度-toppaddingsize-bottompaddingSize=600px-20px-20px=560pxpadding:20px;}(2)在Trident内核中，给div块级元素添加paddingpadding不会展开整个块-水平元素。所以不需要减去周围padding的大小。代码如下所示。.box{宽度：400px;高度：600px；padding:20px;}针对以上差异，在写代码的时候应该怎么做才能兼容IE9呢？CSS3提供了一个box-sizing属性，用于设置盒子模型的布局方式。这个属性从IE8开始就被支持了。当box-sizing属性的值为border-box时，使用该属性给元素添加padding属性后，渲染的宽高不需要减去对应方向的padding大小。那么，我们只需要将所有容器的box-sizing属性设置为border-box，就可以统一盒模型的布局方式，自然兼容IE9浏览器。代码如下所示。*{box-sizing:border-box;}借助这段CSS代码，你可以大胆布局盒子模型，无需考虑兼容性。2.IE9对灵活框布局的支持。可以肯定的是，IE9不支持灵活的框布局。最简单的方法是不使用flexbox布局。这里介绍一个叫Flex-Native的js库，它可以让IE9使用Flex的flexbox布局。(1)在页面中加载Flex-Native库。(2)在容器上开启Flex功能，使用flexbox布局。.box{显示：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)CSS3gradient4.IE9不支持以下CSS选择器(1)::before(2)::after(3)::first-letter(4)::first-line3.IE9对jQuery的支持网上有很多评论关于“IE9仅支持2.0以下的jQuery版本”。项目完成后，我将jQuery的版本升级到3.5.1，亲测有效。至少轮播和滑动门使用的一些jQuery选择器和方法是可用的。如果有IE9不支持jQuery2.0及以上版本的选择器或方法，可以添加。四、IE9不支持placeholder属性HTML5设置了placeholder属性，方便为表单元素编写文本占位符。但是IE9不支持这个属性。可以通过编写jQuery或JavaScript本机脚本来实现解决方案。1、普通文本框的解决方案实现原理：利用文本框的value属性实现占位符。(1)当文本框获得鼠标焦点时，如果文本框的内容是placeholder属性设置的文本，则文本框的内容会消失。(2)当文本框释放鼠标焦点时，如果文本框内容为空，让文本框恢复placeholder属性设置的文本。我使用原生JavaScript来完成它。如果jQuery支持，你也可以使用jQuery来实现。//封装根据类名查找DOM节点的功能function$$(className){returndocument.getElementsByClassName(className);}//文本框的placeholder属性兼容IE9if("msDoNotTrack"inwindow.navigator){//判断浏览器是否为IE9for(vari=0;i<$$("input").length;i++){vartext=$$("input")[i].getAttribute(“占位符”）；$$("输入")[i].value=文本；$$("input")[i].addEventListener("focus",function(){if(this.value==this.getAttribute("placeholder")){this.value="";}})$$("input")[i].addEventListener("blur",function(){vartext=this.getAttribute("placeholder");if(this.value==""){this.value=text;}})}}2.password字段的解决方案产生问题：对于password字段，不能通过脚本使用value属性来模拟占位符功能，因为value属性的值在password字段中显示的密码掩码点，而不是实际的文本内容。解决方法：通过不断的改变密码字段的type属性的值，让密码字段默认的type值为text，这样就可以显示value属性值了。(1)当password字段获得鼠标焦点时，将其type属性改为password，保证输入密码时看不到用户。(2)当密码字段释放鼠标焦点时，将其type属性改为text，保证显示占位符文本。function$$(className){returndocument.getElementsByClassName(className);}//文本框的placeholder属性兼容IE9if("msDoNotTrack"inwindow.navigator){$$("password")[0].类型=“文本”；$$("password")[0].addEventListener("focus",function(){this.type="password";})for(vari=0;i<$$("password").length;i++){vartext=$$("密码")[i].getAttribute("占位符");$$("密码")[i].value=文本；$$("password")[i].addEventListener("focus",function(){if(this.value==this.getAttribute("placeholder")){this.value="";}})$$（“密码”）[i]。addEventListener("blur",function(){vartext=this.getAttribute("placeholder");if(this.value==""){this.value=text;this.type="text"}})}}总结这篇关于IE9兼容性问题的总结，肯定有不足之处。在后面的文章中，我会积累很多在IE9兼容中遇到的其他问题。如果遇到这样的项目，可以借鉴一下。