使用X-UA-Compatible来搞定IE浏览器兼容模式

一次<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />设置引发的“血案”，在开发风险预警系统时候，在每个jsp页面都添加了以上代码，结果导致在IE11版本下显示js报错，页面无法查看。经查，是由于该meta标签X-UA-Compatible引起，经了解学习，该X-UA-Compatible是把双刃剑，需恰当使用。

X-UA-Compatible属性用来设置当前页面将使用哪种文档模式(M)进行解析，即：x-ua-compatible 用来指定IE浏览器解析编译页面的model。可以直接设置浏览器以IE8标准解析该页面代码如下：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

或者

<meta http-equiv="X-UA-Compatible" content="IE=8" />

以下是整理的一些资料，如需了解原理，请继续阅读：

1、首先看一下有关官方对X-UA-compatible的添加位置

The X-UA-compatible header is not case sensitive; however, it must appear in the Web page’s header (the HEAD section) before all other elements, except for the title element and other metaelements.
即
X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前的标头（HEAD 节（可能为英文网页））中。

由此可知，x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。x-ua-compatible同时支持多个编译模式的设置，如：<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >
2、 IE兼容模式的一些总结

文档兼容性的官方定义：https://msdn.microsoft.com/zh-cn/library/cc288325(VS.85).aspx

解析两个概念：浏览器模式(browser mode)和文档模式(document mode)。

浏览器模式（BROWSER MODE）：于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理（User-Agent）字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能，这样就可以向不同的浏览器返回不同的页面内容。

默认情况下，IE8的浏览器模式为IE8。用户可以通过单击地址栏旁边的兼容性视图按钮来手动切换到不同的浏览器模式。在IE8中，IE8兼容性视图会以IE7文档模式来显示网页，同时会向服务器发送IE7的用户代理字符串。

文档模式（document mode）：用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新，但不会更改用户代理字符串中的版本号，也不会从服务器重新下载网页。切换浏览器模式的同时，浏览器也会自动切换到相应的文档模式。

简而言之：浏览器模式的改变，能够改变请求中User Agent的值，让服务器获取后，能够按照UA的值进行对应处理（如果服务器上有这个处理功能）。而文档模式的改变只反映在本地的浏览器解析HTML上，对客户端显示会有影响，而对服务器透明。同时，修改浏览器模式会影响文档模式，反之却不成立。

可按F12打开开发人员工具界面查看（IE10浏览器）

或者通过代码查看

javascript:alert(document.documentMode);
documentMode 属性将返回一个与页面的文档兼容性模式相对应的数值。例如，如果某个页面已选择支持 IE8 模式，则 documentMode 将返回值 8。

注：

（1）X-UA-Compatible是针对IE8新加的一个设置，对于IE8以下的浏览器是不识别的。

（2）IE8 模式支持许多既定行业标准，W3C CSS Level 2.1 规范和 W3C Selectors API，有限支持 W3C CSS Level 3 规范（草案）和其他行业标准。

（3）IE9 模式支持全范围的既定行业标准，包括 HTML5（草案）, W3C CSS Level 3 规范（草案）, SVG 1.0 规范等。

3、常用兼容性代码

（1）IE浏览器各版本兼容性代码：

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">

（2）跨浏览器兼容性代码：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

这样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果没安装GCF，则使用最高版本的IE内核进行渲染。Google Chrome Frame（谷歌内嵌浏览器框架GCF）。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。

使用X-UA-Compatible来搞定IE浏览器兼容模式相关推荐

gulp前端构建化工具，帮你搞定不同浏览器的兼容性写法问题
.相信所有的前端攻城狮.听到浏览器兼容性问题都深有体会. 浏览器兼容性问题,无非就是因为浏览器内核不同,浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.还有就是根据浏览器的版本不同,所兼 ...
ldaptemplate 分页_长图片如何分页打印？3秒搞定|360浏览器|chrome浏览器
将永恒君的百宝箱设为星标精品文章第一时间读文章里面介绍的是用win自带的"画图"软件来进行设置和调节.这两天又发现一个更棒的技巧,和大家分享一下.这次需要用到的就是平常使用的浏 ...
一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: <!Doctype html& ...
搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 -
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: 1 <!Doctype htm ...
干货！一文搞定无头浏览器的概念以及在selenium中的应用
无头浏览器无头浏览器,即 Headless Browser,是一种没有界面的浏览器.它拥有完整的浏览器内核,包括 JavaScript 解析引擎.渲染引擎等.与普通浏览器最大的不同是,无头浏览器执行 ...
再见，可恶的桔梗导航！一文搞定chrome浏览器默认打开页面被流氓软件绑定
每次打开谷歌浏览器,默认打开页面都是桔梗导航,就很烦,就想着你来个百度也好啊,看到这个花花绿绿的浏览器充斥着满屏幕的垃圾信息就真的心烦意乱,我可是计算机系的学生,活人总不能让尿憋死,不行得想个法子~ ...
弧形玻璃清洁机器人_宅家大扫除清洁装备+清洁好物+全屋家电维护一文搞定
前言: 经过长时间的宅家,相信大家现在都比较重视家里的清洁卫生,个人认为居家大扫除中的重点可以分为四个部分,厨房.卫生间.地面和墙面. 所以今天我就来和聊聊我的宅家大扫除中,如何解决这四个部分的清理, ...
一行代码搞定 Scrapy 随机 User-Agent 设置
摘要:爬虫过程中的反爬措施非常重要,其中设置随机 User-Agent 是一项重要的反爬措施,Scrapy 中设置随机 UA 的方式有很多种,有的复杂有的简单,本文就对这些方法进行汇总,提供一种只需要 ...
一行代码搞定 GitHub 访问徽章
相信对于使用 GitHub 的小伙伴来说,以上 GitHub 徽章(badge)应该都不怎么陌生吧.如果你想快速用起来,找到你想要的徽章代码 ctrl+c & ctrl+v ,再修改对应的 G ...

使用X-UA-Compatible来搞定IE浏览器兼容模式

使用X-UA-Compatible来搞定IE浏览器兼容模式相关推荐

最新文章

热门文章