zoukankan      html  css  js  c++  java
  • 再谈 X-UA-Compatible 兼容模式

    如何理解 IE 的文档兼容模式(X-UA-Compatible)?

    IE 浏览器支持多种文档兼容模式,得以因此改变页面的渲染效果。

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

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

    IE8 模式支持许多既定行业标准,W3C CSS Level 2.1 规范和 W3C Selectors API,有限支持 W3C CSS Level 3 规范(草案)和其他行业标准

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

    IE7 模式强制浏览器按照 IE 7 标准模式渲染文档,忽略是否定义指令

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

    Emulate IE9 模式告诉 IE 使用指令来决定如果渲染文档。标准模式下以 IE9 渲染,怪癖模式下以 IE5 渲染。和 IE9 模式不同的是,Emulate IE9 模式会考虑指令

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

    Emulate IE8 模式告诉 IE 使用指令来决定如果渲染文档。标准模式下以 IE8 渲染,怪癖模式下以 IE5 渲染。和 IE8 模式不同的是,Emulate IE8 模式会考虑指令

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

    Emulate IE7 模式告诉 IE 使用指令来决定如果渲染文档。标准模式下以 IE7 渲染,怪癖模式下以 IE5 渲染。和 IE7 模式不同的是,Emulate IE7 模式会考虑指令。对于大多数站点而言,这是首选的兼容模式

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

    IE5 模式告诉 IE7 是否以怪癖模式渲染文档

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

    Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。简单的说,就是什么版本 IE 就用什么版本的标准模式渲染

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

    使用以下代码强制 IE 使用 Chrome Frame 渲染

    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    提示 IE 用户安装 Google Frame
    Google 官方提供了对 Google Frame 插件安装情况的检测,这里直接调用方法即可,如果检测到 IE 并未安装 Google Frame,则弹出对话框提示安装。

    <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>

    最佳的兼容模式方案,结合考虑以上两种:

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

    参考资料:
    Make IE awesome by turning it into Google Chrome
    Defining Document Compatibility

    没有人告诉你,生活会是这样:你工作无趣,你袋里没钱,你的爱情总是昙花一现;妈妈警告过你,会有这样的日子但她没有告诉你,世界将让你屈服。但是,别怕,有我在你身边,谁让我们是friends呢……
  • 相关阅读:
    事务及存储过程
    索引细讲
    数据库练习题
    position: absolute 或 display:table 的水平垂直居中
    bootstrap table 文字超出父div范围
    css 图片不定大小不压缩、不变形的对齐
    vue3.0 + svg 图标
    vue eslint(indent) 空格缩进报错
    vue3.0 + fontAwesome 图标
    vue3.0 + ts + element-plus + i18n 中英文切换
  • 原文地址:https://www.cnblogs.com/ChandlerVer5/p/X-UA-Compatible.html
Copyright © 2011-2022 走看看