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

简介: 深入研究这个问题源于最近制作的几个页面,交给前端后,发现在IE8下,对于JS动态控制的内容,页面高度不能够随着动态的调整。   仔细检查后发现问题在于 display:inline-block 这个属性。

深入研究这个问题源于最近制作的几个页面,交给前端后,发现在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

 

相关文章
|
22天前
|
存储 C++ 容器
C++入门指南:string类文档详细解析(非常经典,建议收藏)
C++入门指南:string类文档详细解析(非常经典,建议收藏)
32 0
|
23天前
|
域名解析 移动开发 负载均衡
阿里云DNS常见问题之DNS负载均衡调加权模式失败如何解决
阿里云DNS(Domain Name System)服务是一个高可用和可扩展的云端DNS服务,用于将域名转换为IP地址,从而让用户能够通过域名访问云端资源。以下是一些关于阿里云DNS服务的常见问题合集:
|
1月前
|
UED 开发者
通义千问新增文档解析功能,可处理超万页文档
【2月更文挑战第25天】通义千问新增文档解析功能,可处理超万页文档
96 6
通义千问新增文档解析功能,可处理超万页文档
|
2月前
|
监控 API 开发者
Sentinel之道:流控模式解析与深度探讨
Sentinel之道:流控模式解析与深度探讨
49 0
|
3月前
|
存储 安全 JavaScript
【分布式技术专题】「授权认证体系」深度解析OAuth2.0协议的原理和流程框架实现指南(授权流程和模式)
在传统的客户端-服务器身份验证模式中,客户端请求服务器上访问受限的资源(受保护的资源)时,需要使用资源所有者的凭据在服务器上进行身份验证。资源所有者为了给第三方应用提供受限资源的访问权限,需要与第三方共享它的凭据。这就导致一些问题和局限:
372 2
【分布式技术专题】「授权认证体系」深度解析OAuth2.0协议的原理和流程框架实现指南(授权流程和模式)
|
4月前
|
IDE Linux KVM
云计算|OpenStack|社区版OpenStack安装部署文档(十二--- openstack的网络模型解析---Rocky版)
云计算|OpenStack|社区版OpenStack安装部署文档(十二--- openstack的网络模型解析---Rocky版)
76 0
|
8天前
|
存储 安全 测试技术
网络奇谭:虚拟机中的共享、桥接与Host-Only模式解析
网络奇谭:虚拟机中的共享、桥接与Host-Only模式解析
16 0
|
1月前
|
存储 安全 区块链
NFT代币模式系统开发技术规则解析
随着区块链技术的飞速发展,NFT(非同质化代币)作为一种独特的数字资产,正在全球范围内掀起一股热潮。NFT不仅赋予了数字内容独一无二的身份标识,更让艺术品、游戏道具等虚拟物品具备了真实可交易的价值。本文将深入探讨NFT代币模式的系统开发源码,带您领略这一创新技术的魅力所在。
|
1月前
|
域名解析 缓存 网络协议
HTTP DNS的工作模式
【2月更文挑战第12天】
HTTP DNS的工作模式
|
6月前
|
设计模式 Go
Go语言事件系统设计解析:发布-订阅模式实战
Go语言事件系统设计解析:发布-订阅模式实战
165 0

推荐镜像

更多