IE8+ 兼容经验小结

本文摘抄自:http://www.hustlzp.com/post/2014/01/ie8-compatibility

前期准备

测试IE兼容性必须要在 Windows 中测,而且是 Win7+,因为 WinXP最高只支持 IE8,IE9就呵呵啦。
大部分做 Web 的童鞋都不是使用 Windows 作为开发环境,要么是 Linux 发行版,要么是 Mac OS,这个时候可以有两种方法解决:

  • 开 Windows 虚拟机
  • 将开发环境暂时切换到 Windows
DOCTYPE

首先需要确保你的 HTML 页面开始部分要有 DOCTYPE 声明。DOCTYPE 告诉浏览器使用什么样的 HTML 或 XHTML 规范来解析 HTML 文档,具体会影响:

  • 对标记、attributes、properties 的约束规则
  • 对浏览器的渲染模式产生影响,不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析

DOCTYPE 是非常关键的,目前的最佳实践就是在 HTML 文档的首行键入:

<!DOCTYPE html>

对于 DOCTYPE 的具体阐述就不展开了,可以参考: 《正确使用DOCTYPE》《CS002: DOCTYPE 与浏览器模式分析》

使用 meta 标签调节浏览器的渲染方式

IE8 中有一个"兼容性视图"的概念,当初 IE8 发布时,相对于 IE6/7 已经做出了非常大的改进,但是很多老站点仅针对 IE6/7 进行了优化,使用 IE8 渲染反而会一团糟。为了照顾这些苦逼的前端工程师,IE8 加入了 "兼容性视图"功能,这样的话就可以在 IE8 中使用 IE6 和 IE7 的内核渲染页面。这个当然不是我们想要的,所以需要使用 meta 标签来强制 IE8 使用最新的内核渲染页面,代码如下:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=edge 表示强制使用 IE 最新内核, chrome=1 表示如果安装了针对 IE6/7/8 等版本的浏览器插件 Google Chrome Frame (可以让用户的浏览器外观依然是 IE 的菜单和界面,但用户在浏览网页时,实际上使用的是 Chrome 浏览器内核),那么就用 Chrome 内核来渲染。

由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例,我们优先通过Webkit内核渲染主流的网站,只有小量的网站通过IE内核渲染,以保证页面兼容。在过去很长一段时间里,我们主要的控制手段是一个几百k大小网址库,一个通过长期人工运营收集的网址库。

尽管我们努力通过用户反馈、代码标签智能判断技术提高浏览器的自动切核准确率。但是在很多情况下,我们仍然无法达到百份百正确。因此,我们新增加了一个控制手段:内核控制Meta标签。只要你在自己的网站里增加一个Meta标签,告诉360浏览器这个网址应该用哪个内核渲染,那么360浏览器就会在读取到这个标签后,立即切换对应的内核。并将这个行为应用于这个二级域名下所有网址。

解决方法360已经告诉我们了,通过meta标签的方式建议其使用Webkit,代码如下:

<meta name="renderer" content="webkit">

我没有做细致的调查,不知道其他的双核浏览器是否支持此特性。

Media Query

IE8 似乎无法识别 Media Query,所以需要 hack 一下啦!推荐采用 Respond.js 解决此问题,具体方法参见它的文档即可。

实现CSS3的某些特性

IE8 不支持 CSS3 的很多新特性,不过我们可以使用一些比较成熟的 hack 方法,我采用的是 CSS3 PIE,它支持的特性有这些:border-radius、box-shadow、border-image、multiple background images、linear-gradient等。

特别注意:请一定阅读 CSS PIE 给出的 Know Issues。

识别HTML5元素

如果你在前端代码中使用了 HTML5 的新标签(nav/footer等),那么在IE中这些标签可能无法正常显示。我使用 html5shiv,具体使用方法见文档。

关于max-width

还有一个在IE8中经常遇到的问题就是 max-width,网页中图片的尺寸可能比较宽,我会给它设置 max-width: 100% 来限制其宽度最大为父容器的宽度,但是有时候却不奏效,慢慢摸索才得知 IE 解析 max-width 所遵循的规则:严格要求直接父元素的宽度是固定的。经实验发现 Chrome 所遵守的规则比 IE 松一些,所以这个问题应该不归属为 IE 兼容性问题,不过我还是提一下吧。分享两个我遇到的场景:
(1)td 中的 max-width

如果针对 td 中的 img 元素设置 max-width: 100%,在 IE 和 Firefox 你会发现不奏效,而在 Chrome 中却是可以的。经查询发现需要给 table 设置 table-layout: fixed,对此属性的具体解释见 W3School

(2)嵌套标签中的 max-width

如下的HTML结构:

<div class="work-item">
    <a href="#" class="work-link">
        <img src="sample.jpg" class="work-image img-responsive">
    </a>
</div>

最外层元素 .work-item 设置了固定宽度,但是对 img 设置 max-width 为 100% 却无效,后来才发现需要再对 a 标签设置 width: 100%,这样才能使最内层的 img 标签充满整个 div。

嵌套 inline-block 下 padding 元素重叠

HTML代码:

<ul>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
</ul>

CSS代码:

ul li {
    display: inline-block;
}
ul li a {
    display: inline-block;
    padding: 10px 15px;
}

按理来说 a 标签之间的距离应该是 30px,但在 IE8 中出现了重叠,只有 15px。这里和这里也提到了同样的问题。我的解决方法是使用 float: left 替代 display: inline-block 实现水平布局。

placeholder

IE8 下不支持 HTML5 属性 placeholder,不过为解决此问题的 js 插件挺多的,比如:jquery-placeholder

last-child

first-child 是 CSS2 的内容,但是 last-child 就不是了,所以 IE8 不买账。推荐的做法不是使用 last-child,而是给最后一个元素设置一个 .last 的 class ,然后对此进行样式设置,这样就全部兼容了。

background-size: cover

如果你想使用 background-size: cover 设置全屏背景,很遗憾 IE8 办不到...但可以使用 IE 独有的 AlphaImageLoader 滤镜来实现,添加一条如下的 CSS 样式:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

将 sizingMethod 设置为 scale 就OK了。

还没完,如果你在此背景之上放置了链接,那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加 position:relative 使其相对浮动。

filter blur

CSS3 中提供支持滤镜效果的属性 filter,比如支持高斯模糊效果的 blur(类似iOS7的效果):

filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);

IE8 对 filter: blur(10px) 的显示效果是对 HTML 元素进行小范围的模糊处理,这个效果并不是高斯模糊,要想支持高斯模糊,需要如下设置:

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');

在实践中发现一个坑就是,所有 position: relative 的元素都不会生效。

其他的发现是,IE9 对 filter: blur(10px) 无效,而对 filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10'); 是针对元素小范围的模糊效果。

好了,目前来说我所遇到的IE8+兼容性问题就这些啦。前端和后端我都做一点,这样的好处在于一个人能够独立开发网站,坏处就是各方面都不精。如果你有蛮重要的补充,或者更好的解决方法,欢迎告诉我!

推荐阅读更多精彩内容