原生页面兼容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;}