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

 

相关文章
|
监控 安全 数据可视化
哪些项目适合采用BOT+EPC模式?深度解析
2分钟了解什么是BOT+EPC项目管理模式以及该模式适用于哪些类型的项目。
1323 1
哪些项目适合采用BOT+EPC模式?深度解析
|
人工智能 自然语言处理 搜索推荐
ViDoRAG:开源多模态文档检索框架,多智能体推理+图文理解精准解析文档
ViDoRAG 是阿里巴巴通义实验室联合中国科学技术大学和上海交通大学推出的视觉文档检索增强生成框架,基于多智能体协作和动态迭代推理,显著提升复杂视觉文档的检索和生成效率。
950 8
ViDoRAG:开源多模态文档检索框架,多智能体推理+图文理解精准解析文档
|
数据可视化 算法 数据挖掘
用傅里叶变换解码时间序列:从频域视角解析季节性模式
本文介绍了如何使用傅里叶变换和周期图分析来识别时间序列中的季节性模式,特别是在能源消耗数据中。通过Python实现傅里叶变换和周期图,可以有效提取并量化时间序列中的主要和次要频率成分,克服传统可视化分析的局限性。这对于准确捕捉时间序列中的季节性变化具有重要意义。文章以AEP能源消耗数据为例,展示了如何应用这些方法识别日、周、半年等周期模式。
624 3
用傅里叶变换解码时间序列:从频域视角解析季节性模式
|
数据采集 Web App开发 存储
深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作
本文介绍了基于无界面浏览器(如ChromeDriver)和代理IP技术的现代爬虫解决方案,以应对传统爬虫面临的反爬机制和动态加载内容等问题。通过Selenium驱动ChromeDriver,并结合亿牛云爬虫代理、自定义Cookie和User-Agent设置,实现高效的数据采集。代码示例展示了如何配置ChromeDriver、处理代理认证、添加Cookie及捕获异常,确保爬虫稳定运行。性能对比显示,Headless模式下的ChromeDriver在数据采集成功率、响应时间和反爬规避能力上显著优于传统爬虫。该方案广泛应用于电商、金融和新闻媒体等行业。
694 0
深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作
|
机器学习/深度学习 人工智能 文字识别
从“泛读”到“精读”:合合信息文档解析如何让大模型更懂复杂文档?
随着deepseek等大模型逐渐步入视野,理论上文档解析工作应能大幅简化。 然而,实际情况却不尽如人意。当前的多模态大模型虽然具备强大的视觉与语言交互能力,但在解析非结构化文档时,仍面临复杂版式、多元素混排以及严密逻辑推理等挑战。
463 0
阿里云CDN怎么收费?看这一篇就够了,CDN不同计费模式收费价格全解析
阿里云CDN的费用由基础费用和增值费用组成。基础费用有三种计费方式:按流量、按带宽峰值和月结95带宽峰值,默认为按流量计费,价格根据使用量阶梯递减。增值费用包括静态HTTPS请求、QUIC请求等,按实际使用量收费,不使用不收费。具体收费标准和详细规则可参考阿里云官方页面。
|
存储 人工智能 自然语言处理
高效档案管理案例介绍:文档内容批量结构化解决方案解析
档案文件内容丰富多样,传统人工管理耗时低效。思通数科AI平台通过自动布局分析、段落与标题检测、表格结构识别、嵌套内容还原及元数据生成等功能,实现档案的高精度分块处理和结构化存储,大幅提升管理和检索效率。某历史档案馆通过该平台完成了500万页档案的数字化,信息检索效率提升60%。
528 5
|
自然语言处理 并行计算 数据可视化
免费开源法律文档比对工具:技术解析与应用
这款免费开源的法律文档比对工具,利用先进的文本分析和自然语言处理技术,实现高效、精准的文档比对。核心功能包括文本差异检测、多格式支持、语义分析、批量处理及用户友好的可视化界面,广泛适用于法律行业的各类场景。
761 1
|
数据采集 机器学习/深度学习 数据挖掘
10种数据预处理中的数据泄露模式解析:识别与避免策略
在机器学习中,数据泄露是一个常见问题,指的是测试数据在数据准备阶段无意中混入训练数据,导致模型在测试集上的表现失真。本文详细探讨了数据预处理步骤中的数据泄露问题,包括缺失值填充、分类编码、数据缩放、离散化和重采样,并提供了具体的代码示例,展示了如何避免数据泄露,确保模型的测试结果可靠。
1333 2
|
人工智能 数据挖掘 大数据
排队免单与消费增值模式:融合玩法与优势解析
排队免单模式通过订单排队、奖励分配、加速与退出机制等,结合消费增值模式中的积分制度、利润入池与积分增值等,共同提升消费者参与度和忠诚度,促进商家销售增长。具体包括订单自动排队、大单拆小单、异业联盟、线上线下融合及数据分析优化等进阶玩法,以及积分增值模型演算,形成一套完整的消费者激励体系。

推荐镜像

更多
  • DNS
  • 下一篇
    开通oss服务