今天在看京东网页代码的时候,发现了X-UA-Compatibles 这个元信息属性,不是很清楚,百度了一下,做下记录
X-UA-Compatible 属性是 IE 浏览器在 IE8 版本开始提供的一个特性,允许开发者通过设置 meta 标记来规定 IE 浏览器在解析网页时使用的文档模式。
通俗点说,这个标签可以实现 IE 浏览器版本模拟。
首先,我们要了解,通过 X-UA-Compatible 属性只能模拟比当前版本更低的版本,并不能模拟高版本。
其次,我们要了解 IE 的文档模式分几种。
- Quirks Mode
- IE7 mode
- IE8 mode
- IE9 mode
- IE10 mode
- IE11 mode
IE7 以上版本都有一个同名的文档模式,而 IE6 和 IE6 以下则只有一个模式,叫“Quirks Mode”。有人翻译成怪异模式,叫什么不重要,我们知道这基本上等同于模拟 IE6 即可,因为 IE5 是比 IE6 更加史前的浏览器,现代人类基本上找不到还有人在使用。
X-UA-Compatible 标记语法
第一种,直接指定某个IE版本的标准文档模式。
以下是要求模拟 IE8 的例子:
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
(注意:这在IE7、IE6中无效,因为 X-UA-Compatible 是 IE8 才开始支持的)
以下是要求模拟 IE9 的例子:
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
(注意:这不仅在IE7、IE6中无效,在 IE8 中也无效,因为不能模拟高于当前的版本)
第二种,指定某个IE版本,但也允许例外。
在IE版本号前面加上 Emulate ,代表,如果网页开头有 <!DOCTYPE> 标记就使用该IE版本的标准文档模式,否则使用怪异模式(即等同于 IE=IE5)
以下是要求模拟 IE8 的例子:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
根据例子代码,如果你的网页开头带有 <!DOCTYPE> 标记,则模拟 IE8, 等同于:
<meta http-equiv="X-UA-Compatible" content="IE=IE8"/>
如果你的网页开头没有 <!DOCTYPE> 标记,则模拟 IE6, 等同于:
<meta http-equiv="X-UA-Compatible" content="IE=IE5"/>
不建议使用这个语法。
第三种,总是使用最新版本文档模式。
以下是例子:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
根据例子代码,IE浏览器将总是使用最新版本的文档模式,如用 IE8 访问就是 IE8 文档模式,用 IE9 访问就是 IE9 模式,用 IE10 访问就是 IE10 模式,用 IE11 访问就是 IE11 模式。
注意:此声明并不是多此一举,如果你不使用 IE=edge 标记,IE浏览器会根据你的网页内容采用兼容视图,可能采用更低版本。
除非不准备兼容所有旧版IE,否则也不建议使用这个语法。
除了标准用法之外,还有一些特殊用法,如:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
这段代码的意思是,如果安装了 Google Chrome Frame (谷歌浏览器內嵌框架)则使用谷歌浏览器内核模式,否则使用最新的IE模式。
IE跨版本兼容思路
如上所述,X-UA-Compatible 只能模拟比当前安装版本更低的版本,不能模拟更高版本。根据这个特性,兼容思路如下。
如果我们要往下兼容到 IE8 ,那么我们网页则应该提前添加好标记:
<meta http-equiv="X-UA-Compatible" content="IE=IE8"/>
网页HTML/CSS/JS代码按 IE8 浏览器文档模式进行兼容性处理,不使用超过 IE8 文档模式的特性。
那么,我们就只需要维护一份 IE8 兼容代码,而用户无论是在 IE9 / IE10 / IE11 访问都是如同 IE8 访问一样。(要往下兼容到 IE9 或者 IE10 都以此类推。)
然后为 IE8 以下版本添加旧版IE浏览器升级提示,或跳转到IE浏览器升级提示页,如 X-UA-Compatible 代码下添加:
<!--[if lte IE 7]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script><![endif]-->
如无特殊情况,由于 IE11 以下版本都已停止更新,无论是从代码工作量还是从用户安全的角度来讲,我们都不应该再兼容 IE11 以下版本。
在这种情况下,我们可以使用如下标记:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
然后为 IE11 以下版本添加旧版IE浏览器升级提示,或跳转到IE浏览器升级提示页,在 X-UA-Compatible 代码下添加:
<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>
(IE10不支持 if IE 语句,但 @cc_on 是 IE10 及更旧版IE特有的条件编译语句,因此可以用来判断是否除 IE11 的其他IE版本。)
双核浏览器兼容思路
国产浏览器大多带有 Chromium 内核和 IE 内核,在用户访问网页时双核浏览器根据网页内容自动选择内核。不过,双核浏览器也提供了类似 X-UA-Compatible 特性的 meta 标记,允许网页开发者通过标记选择内核。
一、使用 Chromium 内核(极速模式)
<meta name="renderer" content="webkit"/>
二、使用 IE 8/9/10/10 内核(IE标准模式,部分支持 HTML5)
<meta name="renderer" content="ie-stand"/>
三、使用 IE 6/7 内核(IE兼容模式,不支持 HTML5)
<meta name="renderer" content="ie-comp"/>
如果网站采用最新CSS3/HTML5编写,那么,我们应该令其使用 Chromium 内核(也就是 Webkit 内核)渲染。
代码如下:
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
第一行作用于360浏览器、QQ浏览器等国产双核浏览器,第二行作用于其他双核浏览器。
如果网站在 IE 浏览器效果更好,那么,我们可以要求其使用IE标准内核渲染。
代码如下:
<meta name="renderer" content="ie-stand"/>
实际上,由于 IE11 以下版本都已经停止更新,绝大部分前端开源项目都已经不再兼容 IE11 以下的旧版IE。往下兼容到 IE8 版本的网站已经寥寥无几,兼容 IE7/IE6 更是近乎绝迹。
但是,即使每天只有稀稀拉拉几个旧版IE用户访问网站,我们也不应该让他看到一屏乱码。面对依然使用旧版IE的用户,我们可以友好地提示其升级浏览器后再访问。
通过以下代码,当用户使用已经停止更新的IE10或旧版IE访问网站将会自动跳转到浏览器升级页:
<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>
综上所述,下面我们提供三个代码示例。
示例一:适合针对特定IE版本进行过优化的网站。
示例场景:网站针对 IE9 做了优化,IE10 / IE11 和双核浏览器访问时默认采用 IE9 标准文档模式。而 IE8 及以下IE浏览器访问则跳转至升级提示页。
代码如下:
<meta name="renderer" content="ie-stand"/>
<meta name="force-rendering" content="ie-stand"/>
<meta http-equiv="X-UA-Compatible" content="IE=IE9"/>
<!--[if lte IE 8]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script><![endif]-->
示例二:适合针对特定IE版本进行过优化但对HTML5更加友好的网站。
示例场景:网站针对 IE9 做了优化,但 Chrome 访问效果更佳,双核浏览器访问时默认采用 Chrome 内核,IE10 / IE11 访问时优先采用 IE9 标准文档模式。而 IE8 及以下IE浏览器访问则跳转至升级提示页。
代码如下:
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=IE9,chrome=1"/>
<!--[if lte IE 8]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script><![endif]-->
示例三:只支持微软仍然支持和更新的IE11浏览器。
示例场景:考虑到微软已经停止更新IE10以及更低版本的IE,为了用户使用安全和更好的使用体验,不再支持旧版IE。双核浏览器访问时默认采用 Chrome 内核,IE11 以下旧版IE访问时跳转到升级提示页。
(@cc_on 是 IE10 及更旧版IE特有的条件编译语句,因此可以用来判断是否除 IE11 的其他IE版本。)
代码如下:
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>