IE对文档的解析模式及兼容性问题

深入研究这个问题源于最近制作的几个页面,交给前端后,发现在IE8下,对于JS动态控制的内容,页面高度不能够随着动态的调整。

仔细检查后发现问题在于 display:inline-block 这个属性。

inline-block 这个属性确实帮我们解决了不少问题,但是IE8在动态内容的渲染支持上,还是会有奇怪的问题。

最后的解决方法是使用 x-ua-compatible ,来强制IE8使用IE7的模式来解析页面。下面是整理的一些相关的资料。

IE的文档模式

Document Compatibility 决定了IE如何渲染你的页面,IE支持不同的 document (compatibility) mode。IE6之后的所有IE浏览器都支持以下几种模式:

Standards mode:就是每个浏览器版本所提供的最新的功能,也是默认的模式;

Quirks mode:这个模式强调兼容性超过标准(影响可以看这里

Almost-standards mode:这个模式支持最新标准的API,但是界面渲染还是遵循旧版本的标准。

如果一个页面包含了 <!DOCTYPE> 标签,那么IE浏览器会按照标准模式进行解析。如果一个不包含 <!DOCTYPE> 的页面,IE浏览器使用 Quirks mode 来进行解析,这种情况下可能会有奇怪的事情发生。

大多数时候,我们都使用标准的模式来指定文档模式。这样能够确保适应尽可能多的标准。

<!DOCTYPE html>

有些时候,我们需要指定一些高版本的浏览器使用低版本的文档模式解析页面,这时我们可以使用  x-ua-compatible 头标签来实现。例如:

<html>

<head>

     <!-- Use Internet Explorer 9 Standards mode -->

     <meta http-equiv="x-ua-compatible" content="IE=9">

     <title>My Page</title>

</head>

<body>

     <p>Content goes here.</p>

</body>

</html>

上面这段代码,在不同的浏览器版本中,有不同的表现,如下表:

浏览器版本

结果

描述

Windows Store app或Windows UI中的浏览器

IE 10 标准模式

这是Windows Store app和Windows UI中唯一支持的模式

Internet Explorer for the Desktop 或者Internet Explorer 9

IE9 标准模式

这正是x-ua-compatible指定的模式,而且浏览器支持这种模式

Internet Explorer 8

IE8 标准模式

因为浏览器不支持IE9标准模式,所以使用浏览器支持的最高标准模式

Internet Explorer 7, Internet Explorer 6 或者Internet Explorer 5.5 for mac

IE5 (Quirks)模式

这些浏览器不支持这个标签头,并且网页中也没有指定<!DOCTYPE>

记住以下几个规则:

  • 如果页面指定了DOCTYPE并且也使用了x-ua-compatible标签,则x-ua-compatible标签将覆盖DOCTYPE
  • 如果浏览器支持x-ua-compatible标签,浏览器会使用他所支持的最高模式显示,则未必是标签指定的版本
  • 对于不支持x-ua-compatible标签的老版本浏览器,使用<!DOCTYPE>来决定文档模式
  • IE9和之前版本的浏览器,在遇到没有指定<!DOCTYPE>的页面时,使用IE5 Quirks模式解析文档,所以建议所有文档都要包含<!DOCTYPE>

注意:所有版本的浏览器在解析 <!DOCTYPE html> 时,都会使用各自版本所支持的最高的标准模式来解析,所以推荐都是用HTML5的标记方式。IE9中,包含框架Frameset的页面,子页面的模式和父页面一致。但是在IE10中,可以分别指定。

用法:

x-ua-compatible 头标签大小写不敏感,必须用在 head 中,必须在除 title 外的其他 meta 之前使用。

1、使用一行代码来指定浏览器使用特定的文档模式。

<meta http-equiv="x-ua-compatible" content="IE=9" >

<meta http-equiv="x-ua-compatible" content="IE=8" >

<meta http-equiv="x-ua-compatible" content="IE=7" >

2、在一些情况下,我们需要限定浏览器对文档的解析到某一特定版本,或者将浏览器限定到一些旧版本的表现中。可以用如下的方式:

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >

使用这种写法,浏览器或者使用标准模式进行解析,或者使用 IE5 Quirks 模式进行解析。

3、为了测试,我们也可以使用下面的语句指定浏览器按照最高的标准模式解析页面。

<meta http-equiv="x-ua-compatible" content="IE=edge" >

4、多个模式的指定。我们可以用逗号分割多个版本,这种情况下,浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子,在IE8进行浏览时,将会使用IE7的标准模式进行渲染,因为他本身不支持IE9和IE10。

<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >

参考资料:

1、ie8 bugs

2、Cross Browser Support for inline-block Styling

3、使用x-ua-compatible来设置IE兼容模式

4、MSDN:Define Document compatibility

5、The effects of quirks mode emulation

6、Specifying legacy document modes

7、IE9提供四种兼容模式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Spark学习技巧

聊聊spark-submit的几个有用选项

1303
来自专栏L宝宝聊IT

Squid代理服务器

97111
来自专栏云计算教程系列

如何使用Restic Backup Client将数据备份到对象存储服务

Restic是一个用Go语言编写,安全且高效的备份客户端。它可以将本地文件备份到许多不同的后端存储库,例如本地目录,SFTP服务器或对象存储服务。

3262
来自专栏算法channel

基础|进程和线程模型

计算机中最重要的模型之一,莫过于进程模型和线程模型了,对于它们的深刻理解,直接关系到软件开发,算法设计等计算机细分方向。 01 — 进程模型 进程是指一个具有一...

3955
来自专栏用户画像

2.1进程与线程

在多道程序同时运行的背景下,进程之间需要共享系统资源,这样就会导致各程序在执行过程中出现相互制约的关系,程序的执行就会表现出间断性的特性。这些特性都是在程序的执...

632
来自专栏程序员同行者

Linux 双网卡绑定

7234
来自专栏linux系统运维

rsync工具介绍, rsync常用选项,rsync通过ssh同步

2505
来自专栏开源优测

python selenium2 开发环境搭建

环境搭建 基于python和selenium2做自动化测试,你必须会搭建基本的开发环境,掌握python基本的语法和一个IDE来进行开发,这里通过详细的讲解,介...

2855
来自专栏IT技术精选文摘

架构师详解:Nginx 架构

1604
来自专栏linux系统运维

php-fpm的pool,php-fpm慢执行日志,open_basedir,php-fpm进程管理

2584

扫码关注云+社区

领取腾讯云代金券