IE8+兼容经验小结

January 15, 2014

本文分享下我在项目中积累的IE8+兼容性问题的解决方法。根据我的实践经验，如果你在写HTML/CSS时候是按照W3C推荐的方式写的，然后下面的几点都关注过，那么基本上很大一部分IE8+兼容性问题都OK了（这里的IE8+主要是指IE8，据个人目测，IE9+的渲染效果已经非常好了）。

我觉得可以把精力集中在这几个浏览器上：IETester（IE8-IE9）、360浏览器、搜狗浏览器、Chrome。IETester测完了建议再用真实的IE8、IE9过一遍，以防万一。

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内核来渲染。关于此meta标签的具体说明，可参见StackOverflow上的精彩回答。

国内存在很多双核浏览器比如360浏览器、搜狗浏览器，它们是怎么决定某页面到底使用哪种内核渲染？下面引用一段360浏览器v6新特性的官方说明：

由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于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浏览器兼容问题总结的更多相关文章

  1. css3 flex的IE8浏览器兼容问题

    我这是进行判断浏览器 css判断ie版本才引用样式或css文件 <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> &l ...

  2. 【转】让Bootstrap 3兼容IE8浏览器

    FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...

  3. 让Bootstrap 3兼容IE8浏览器

    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...

  4. bootstrap3 兼容IE8浏览器

    近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap ...

  5. echarts在360中以及IE8浏览器不兼容：解决方案

    参考:http://blog.csdn.net/www3300300/article/details/12992489 添加: <head> <meta http-equiv=&qu ...

  6. Bootstrap 3兼容IE8浏览器（转）

    Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...

  7. Bootstrap 3 兼容 IE8 浏览器

    公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动 ...

  8. wordpress通过代码禁用IE8, IE9，IE10等IE浏览器兼容视图模式（Compatibility View）

    目前wordpress主流主题大多都放弃了对IE6的支持!甚至IE6,IE7,IE8等的兼容模式也不支持!目前特别是国内的双核浏览器大多数使用使用IE内核都是使用的兼容模式!那将是非常糟糕!如何让IE ...

  9. 浅谈如何让 Bootstrap 3兼容IE8浏览器

    Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.-- Bootstrap 官网 Bootstrap 来自 Twitter,是目前最 ...

随机推荐

  1. Git一些其它的功能

    Git 开始之前我们配置过user.name和user.email.其实还有很多其他的配置项 例如:让Git显示颜色,会让命令输出来更醒目: $ git config --global color.u ...

  2. 【Machine Learning in Action --3】决策树ID3算法预测隐形眼睛类型

    本节讲解如何预测患者需要佩戴的隐形眼镜类型. 1.使用决策树预测隐形眼镜类型的一般流程 (1)收集数据:提供的文本文件(数据来源于UCI数据库) (2)准备数据:解析tab键分隔的数据行 (3)分析数 ...

  3. HTML+CSS Day11产品网站

    1.佰亿首页 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  4. GDB: advanced usages

    Sometimes running program in Unix will fail without any debugging info or warnings because of the la ...

  5. forEach用法介绍

    array.forEach(callback[, thisArg]) forEach() 方法让数组的每一项都执行一次给定的函数. callback在数组每一项上执行的函数,接收三个参数: curre ...

  6. Java 处理图片 base64 编码的相互转换

    哈喽大家好我是刘德华. 今天项目优化了一下上传头像的功能.采用 imagecropper 插件完成裁剪图片的效果. 这个插件裁剪完的图片都是 base64 加密的字符串,上传头像也就涉及到了如何把加密 ...

  7. 把excel数据导入mysql中

    适用:每列的数据都不是以逗号分隔. 1.在mysql建表,全部字段与表头相同且顺序一致 2.将excel另存为csv格式,用Editplus把CSV文件另存为UTF-8编码格式 3.执行load da ...

  8. NGUI插件的一个扩展---NGUI_HUD_Text

    NGUI_HUD_Text扩展主要用于主角跟随和伤害/治疗的功能. 场景大概是这样的,我们希望有一个主角,在其头顶显示他的名字,在单击鼠标左键的时候显示红色的“-10”表示减少血量,单击鼠标右键的时候 ...

  9. 《JS权威指南学习总结--第三章类型、值和变量》

    第三章 类型.值和变量 内容要点 一.数据类型 1.在编程语言中,能够表示并操作的值的类型称做数据类型 2.JS的数据类型分为两类: 原始类型:数字.字符串和布尔值 对象类型 3.JS中有两个特殊的原 ...

  10. git(工作区，暂存区，管理修改，撤销修改，删除文件)

    工作区和暂存区 984次阅读 Git和其他版本控制系统如SVN的一个不同之处就是有暂存区的概念. 先来看名词解释. 工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的l ...