• 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>

  • 相关阅读:
    java实现三角螺旋阵
    java实现人员排日程
    java实现人员排日程
    java实现人员排日程
    java实现人员排日程
    java实现人员排日程
    java实现人民币金额大写
    为什么使用剪切板时都用GlobalAlloc分配内存(历史遗留问题,其实没关系了)
    深入解析Windows窗口创建和消息分发(三个核心问题:怎么将不同的窗口过程勾到一起,将不同的hwnd消息分发给对应的CWnd类去处理,CWnd如何简单有效的去处理消息,由浅入深,非常清楚) good
    Delphi中array of const应用
  • 原文地址:https://www.cnblogs.com/xmnote/p/11362410.html
Copyright © 2020-2023  润新知