关于javascript:原生页面兼容IE9问题的解决方案

前言

最近，接了一个客户的原生页面。客户要求该页面必须兼容 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 属性 兼容 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 属性的取值在明码域中显示的是小圆点的明码掩码，而不是实在的文本内容。

解决方案：通过一直地扭转明码域的 type 属性的取值，让明码域默认的 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 兼容性遇到的其余问题，大家如果遇到此类我的项目，能够借鉴应用。