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

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 深入研究这个问题源于最近制作的几个页面,交给前端后,发现在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

 

相关文章
|
3月前
|
设计模式 监控 Java
解析Spring Cloud中的断路器模式原理
解析Spring Cloud中的断路器模式原理
|
4月前
|
设计模式 缓存 JavaScript
API设计模式:REST、GraphQL、gRPC与tRPC全面解析
API设计模式:REST、GraphQL、gRPC与tRPC全面解析
|
16天前
|
设计模式 存储 安全
PHP中单例模式的深入解析与实践指南
在PHP开发领域,设计模式是构建高效、可维护代码的重要工具。本文聚焦于单例模式——一种确保类仅有一个实例,并提供全局访问点的模式。我们将从理论出发,探讨单例模式的基本概念、应用场景,并通过实际案例分析其在PHP中的实现技巧。最后,讨论单例模式的优势、潜在缺陷及如何在实际项目中合理运用。
|
2月前
|
JSON 测试技术 API
Python开发解析Swagger文档小工具
文章介绍了如何使用Python开发一个解析Swagger文档的小工具,该工具可以生成符合httprunner测试框架的json/yaml测试用例,同时还能输出Excel文件,以方便测试人员根据不同需求使用。文章提供了详细的开发步骤、环境配置和使用示例,并鼓励读者为该开源项目贡献代码和建议。
39 1
Python开发解析Swagger文档小工具
|
2月前
|
消息中间件 开发者
【RabbitMQ深度解析】Topic交换器与模式匹配:掌握消息路由的艺术!
【8月更文挑战第24天】在消息队列(MQ)体系中,交换器作为核心组件之一负责消息路由。特别是`topic`类型的交换器,它通过模式匹配实现消息的精准分发,适用于发布-订阅模式。不同于直接交换器和扇形交换器,`topic`交换器支持更复杂的路由策略,通过带有通配符(如 * 和 #)的模式字符串来定义队列与交换器间的绑定关系。
47 2
|
2月前
|
C# 开发者 Windows
震撼发布:全面解析WPF中的打印功能——从基础设置到高级定制,带你一步步实现直接打印文档的完整流程,让你的WPF应用程序瞬间升级,掌握这一技能,轻松应对各种打印需求,彻底告别打印难题!
【8月更文挑战第31天】打印功能在许多WPF应用中不可或缺,尤其在需要生成纸质文档时。WPF提供了强大的打印支持,通过`PrintDialog`等类简化了打印集成。本文将详细介绍如何在WPF应用中实现直接打印文档的功能,并通过具体示例代码展示其实现过程。
139 0
|
2月前
|
开发者 云计算 数据库
从桌面跃升至云端的华丽转身:深入解析如何运用WinForms与Azure的强大组合,解锁传统应用向现代化分布式系统演变的秘密,实现性能与安全性的双重飞跃——你不可不知的开发新模式
【8月更文挑战第31天】在数字化转型浪潮中,传统桌面应用面临新挑战。本文探讨如何融合Windows Forms(WinForms)与Microsoft Azure,助力应用向云端转型。通过Azure的虚拟机、容器及无服务器计算,可轻松解决性能瓶颈,满足全球用户需求。文中还提供了连接Azure数据库的示例代码,并介绍了集成Azure Storage和Functions的方法。尽管存在安全性、网络延迟及成本等问题,但合理设计架构可有效应对,帮助开发者构建高效可靠的现代应用。
23 0
|
2月前
|
开发者 iOS开发 C#
Uno Platform 入门超详细指南:从零开始教你打造兼容 Web、Windows、iOS 和 Android 的跨平台应用,轻松掌握 XAML 与 C# 开发技巧,快速上手示例代码助你迈出第一步
【8月更文挑战第31天】Uno Platform 是一个基于 Microsoft .NET 的开源框架,支持使用 C# 和 XAML 构建跨平台应用,适用于 Web(WebAssembly)、Windows、Linux、macOS、iOS 和 Android。它允许开发者共享几乎全部的业务逻辑和 UI 代码,同时保持原生性能。选择 Uno Platform 可以统一开发体验,减少代码重复,降低开发成本。安装时需先配置好 Visual Studio 或 Visual Studio for Mac,并通过 NuGet 或官网下载工具包。
68 0
|
2月前
|
前端开发 开发者 C#
深度解析 Uno Platform 中的 MVVM 模式:从理论到实践的全方位指南,助你轻松掌握通过 C# 与 XAML 构建高效可维护的跨平台应用秘籍
【8月更文挑战第31天】本文详细介绍如何在优秀的跨平台 UI 框架 Uno Platform 中实施 MVVM(Model-View-ViewModel)模式,通过一个简单的待办事项列表应用演示其实现过程。MVVM 模式有助于分离视图层与业务逻辑层,提升代码组织性、易测性和可维护性。Uno Platform 的数据绑定机制使视图与模型间的同步变得高效简便。文章通过构造 `TodoListViewModel` 类及其相关视图,展示了如何解耦视图与模型,实现动态数据绑定及命令处理,从而提高代码质量和开发效率。通过这一模式,开发者能更轻松地构建复杂的跨平台应用。
29 0
|
2月前
|
SQL 安全 数据库

推荐镜像

更多