美文网首页Front End
[FE] IE兼容性模式X-UA-Compatible

[FE] IE兼容性模式X-UA-Compatible

作者: 何幻 | 来源:发表于2016-03-08 07:18 被阅读801次

    <u></u>X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。
    通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。

    在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。
    兼容性模式设置优先级:

    meta tag > http header
    

    例子:

    告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    
    告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    
    告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    chrome=1表示可以激活Chrome Frame
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    

    注:
    Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页,因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术。

    注意事项:
    (1)根据官网定义X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除title元素和其他meta元素以外的所有其他元素之前。如果不是的话,它不起作用
    (2)content的内容如果不写“IE=”,将不起作用。

    服务器端配置方案:

    如果对WEb服务器了解,可以直接配置一下VirtualHost
    Apache:

    <IfModulemod_setenvif.c>
    <IfModulemod_headers.c>
    BrowserMatch MSIE ie
        Header set X-UA-Compatible "IE=Edge" env=ie
    BrowserMatchchromeframegcf
        Header append X-UA-Compatible "chrome=1" env=gcf
    </IfModule>
    </IfModule>
    

    **Nginx: **

    add_header "X-UA-Compatible" "IE=Edge,chrome=1";
    

    参考:
    http://lightcss.com/add-x-ua-compatible-meta-to-your-website/
    http://desert3.iteye.com/blog/1638591

    [Specifying legacy document modes]
    https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx

    相关文章

      网友评论

        本文标题:[FE] IE兼容性模式X-UA-Compatible

        本文链接:https://www.haomeiwen.com/subject/okrnkttx.html