IE浏览器的兼容模式代码细节解读
兼容性对于网页设计师来说非常重要。虽然最好是建立一个完全不需依赖任何网页浏览器特性或功能的网站,但是有时候这是不可能实现的。而文件兼容模式能将网页限制在某个特定版本的IE中。
可以使用 X-UA-Compatible 标头来指定网页支持的IE版本,可以使用 document.documentMode 来判定网页的兼容性模式。
通过选择支持某个特定版本的IE,你可以确保你的网页在未来的浏览器版本中也能显示一致。
指定网页兼容性模式
要为网页指定兼容模式,需要在网页中使用 meta 元素放入 X-UA-Compatible http-equiv 标头。以下范例是指定网页为 IE7 兼容模式。
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
复制代码
不过前两天给一个网站调试的时候发现他连续加了两个版本的兼容,结果没有任何变化,结果查了下资料原来是IE浏览器只能读第一个兼容的代码后面的都不认!
即:IE只会执行网页中第一个 X-UA-Compatible 标头。
可以使用多个属性值来指定网页兼容模式,这能使网页在将来的浏览器版本中保持显示一致。如果需要设置多个兼容模式,使用分号分开各个模式。
如果一个特定版本的 IE 支持的可用兼容模式多于一种,则将采用列于标头属性中最高的可用模式。尽管不推荐这样做,但是可以使用这个特性来排除特定的兼容模式。下面的例子将会排除 IE7 模式。
- <meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" >
复制代码
常用兼容标头如下:
各种兼容模式代码范例:
- <meta http-equiv="X-UA-Compatible" content="IE=5" />
复制代码
像是使用了 Windows Internet Explorer 7 的 Quirks 模式,这与 Windows Internet Explorer 5 显示内容的方式很相似。
- <meta http-equiv="X-UA-Compatible" content="IE=7" />
复制代码
无论页面是否包含 <!DOCTYPE> 指令,均使用 Windows Internet Explorer 7 的标准渲染模式。
- <meta http-equiv="X-UA-Compatible" content="IE=8" />
复制代码
开启 IE8 的标准渲染模式,但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本,因此等同于冗余代码。
- <meta http-equiv="X-UA-Compatible" content="edge" />
复制代码
Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容,这实际上破坏了“锁定”模式。
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
复制代码
EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示,而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同,EmulateIE7 模式遵循 <!DOCTYPE> 指令。
IE浏览器的兼容模式代码细节解读的更多相关文章
- 强制浏览器使用兼容模式,Web.config,httpProtocol
对于一些政府类的网站,很多支持IE6~8,而不支持使用更高版本浏览器浏览.虽然有些浏览器会自动使用兼容模式,或有些人会手动调整浏览器的兼容模式,但不是每一个人.每一款浏览器都可以做到用兼容模式.所以, ...
- QQ浏览器、搜狗浏览器等兼容模式下,Asp.NetCore下,Cookie、Session失效问题
原文:QQ浏览器.搜狗浏览器等兼容模式下,Asp.NetCore下,Cookie.Session失效问题 这些狗日的浏览器在兼容模式下,保存Cookie会失败,是因为SameSiteMode默认为La ...
- js判断360浏览器 兼容模式IE版本
var ms_ie = false; var ua = window.navigator.userAgent.toLowerCase(); var old_ie = ua.indexOf('MSIE' ...
- vue项目在ie浏览器和360浏览器的兼容模式下不显示,出现promise未定义问题
出现“promise未定义”问题,因为对es6不兼容 在项目中安装 babel-polyfill 依赖包 ① npm install babel-polyfill --save-dev ② 在main ...
- 浏览器的兼容模式下的button中文字垂直方向不居中显示
<button style="cursor:pointer;vertical-align: middle;" >删除</button> 这时候垂直不居中. ...
- QQ浏览器兼容模式问题
今天客户反馈有个问题,他说用360浏览器的兼容模式无法登陆系统,我试了可以,接着试了IE11,也可以,然后跟经理汇报,他说他用qq浏览器兼容模式就不可以,于是我试了,果然不可以... 问题是酱紫的:输 ...
- ASP.NET服务器控件在IE10浏览器(非兼容模式)下报脚本错误的可能解决办法
关于IE10出现LinkButton点击无效的情况: 一般高配置的系统如Win7旗舰版SP1系统不会出现这种情况,针对家庭普通版和专业版的用户通过测试都有这种情况,对于开发人员要解决不同 ...
- 浏览器 CSS 兼容写法的测试总结
做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Fir ...
- 在360的兼容模式下关于innerHTML=“”,引发的问题
innerHTML属性,可以动态设置和修改dom,但是在360的兼容模式下回存在一些问题...... var dBody = document.body; var fatherDom = docume ...
随机推荐
- ehcache 缓存
一:详细配置步骤 1,添加ehcache.xml文件 将ehcache.xml文件添加到src路径下面.ehcache.xml文件内容如下 <ehcache> <diskStore ...
- C++ Primer : 第九章 : vector变长、string的其他操作以及容器适配器
vector变长机制.string的其他构造方法,添加.替换和搜索操作,string比较和数值转换,最后是容器适配器. vector对象是如何增长的 vector和string类型提供了一些成员函数, ...
- sgu548 Dragons and Princesses 贪心+优先队列
题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=548 题目意思: 有一个骑士,要经过n个房间,开始在第一个房间,每个房间里面有龙或者 ...
- linux网络故障解决方法
一.检测工具 tcpdump:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的“头”完全截获 ...
- codevs 1704 卡片游戏
题目描述 Description 桌面上有一叠牌,从第一张牌(即位于顶面的牌)开始从上往下依次编号为1~n.当至少还剩两张排时进行一下操作:把第一张牌扔掉,然后把新的第一张牌放到整叠牌的最后.输入n. ...
- hihoCoder#1014 Trie树 (前缀树)
题目大意:给一本有n个单词的词典,有m次询问,每次询问的是该词典中有多少个单词有共同的某个前缀. 题目分析:在添加单词建立trie的时候,每经过一个节点就意味着该节点和它的各级祖先节点是某个单词的前缀 ...
- 【POJ3904】【P1202】水晶密码
说是莫比乌斯反演,其实只是玩儿玩儿内个miu函数而已…… 原题: wty 打算攻击 applepi 的用来存放机密数据的水晶系统. applepi 早有察觉,于是布置了一个密码系统来防备 wty ...
- TinyXML2读取和创建XML文件 分类: C/C++ 2015-03-14 13:29 94人阅读 评论(0) 收藏
TinyXML2是simple.small.efficient C++ XML文件解析库!方便易于使用,是对TinyXML的升级改写!源码见本人上传到CSDN的TinyXML2.rar资源:http: ...
- PWM控制led渐变
PWM,中文释义:脉冲宽度调制.它是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术. PWM 是一种对模拟信号电平进行数字编码的方法.通过高分辨率计数器的使用,方波的占空比被调制用来对 ...
- activity状态的保存和保持(onRetainNonConfigurationInstance和getLastNonConfigurationInstanc
本文转载于:http://chengbs.iteye.com/blog/1156167 比较onsaveinstancestate() 与 onretainnonconfigurationinstan ...