zoukankan      html  css  js  c++  java
  • X-UA-Compatibles

    今天在看京东网页代码的时候,发现了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>

  • 相关阅读:
    解决UITableView中Cell重用机制导致内容出错的方法总结
    Hdu 1052 Tian Ji -- The Horse Racing
    Hdu 1009 FatMouse' Trade
    hdu 2037 今年暑假不AC
    hdu 1559 最大子矩阵
    hdu 1004 Let the Balloon Rise
    Hdu 1214 圆桌会议
    Hdu 1081 To The Max
    Hdu 2845 Beans
    Hdu 2955 Robberies 0/1背包
  • 原文地址:https://www.cnblogs.com/xmnote/p/11362410.html
Copyright © 2011-2022 走看看