Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

IE浏览器的兼容模式代码细节解读

[复制链接]
elevensky 发表于 2011-8-31 15:12:23 | 显示全部楼层 |阅读模式
本帖最后由 elevensky 于 2011-8-31 15:12 编辑

兼容性对于网页设计师来说非常重要。虽然最好是建立一个完全不需依赖任何网页浏览器特性或功能的网站,但是有时候这是不可能实现的。而文件兼容模式能将网页限制在某个特定版本的IE中。
可以使用 X-UA-Compatible 标头来指定网页支持的IE版本,可以使用 document.documentMode 来判定网页的兼容性模式。
通过选择支持某个特定版本的IE,你可以确保你的网页在未来的浏览器版本中也能显示一致。
指定网页兼容性模式
要为网页指定兼容模式,需要在网页中使用 meta 元素放入 X-UA-Compatible  http-equiv 标头。以下范例是指定网页为 IE7 兼容模式。
  1. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
复制代码
不过前两天给一个网站调试的时候发现他连续加了两个版本的兼容,结果没有任何变化,结果查了下资料原来是IE浏览器只能读第一个兼容的代码后面的都不认!
:IE只会执行网页中第一个 X-UA-Compatible 标头。
可以使用多个属性值来指定网页兼容模式,这能使网页在将来的浏览器版本中保持显示一致。如果需要设置多个兼容模式,使用分号分开各个模式。
如果一个特定版本的 IE 支持的可用兼容模式多于一种,则将采用列于标头属性中最高的可用模式。尽管不推荐这样做,但是可以使用这个特性来排除特定的兼容模式。下面的例子将会排除 IE7 模式。
  1. <meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" >
复制代码
常用兼容标头如下:
各种兼容模式代码范例
  1. <meta http-equiv="X-UA-Compatible" content="IE=5" />
复制代码
像是使用了 Windows Internet Explorer 7 的 Quirks 模式,这与 Windows Internet Explorer 5 显示内容的方式很相似。

  1. <meta http-equiv="X-UA-Compatible" content="IE=7" />
复制代码
无论页面是否包含 <!DOCTYPE> 指令,均使用 Windows Internet Explorer 7 的标准渲染模式。

  1. <meta http-equiv="X-UA-Compatible" content="IE=8" />
复制代码
开启 IE8 的标准渲染模式,但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本,因此等同于冗余代码。

  1. <meta http-equiv="X-UA-Compatible" content="edge" />
复制代码
Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容,这实际上破坏了“锁定”模式。

  1. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
复制代码
EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示,而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同,EmulateIE7 模式遵循 <!DOCTYPE> 指令。


wbcsa 发表于 2011-9-1 09:07:06 | 显示全部楼层
沙发啊!  整天为兼容头疼。学习了!
回复

使用道具 举报

ARCHY` 发表于 2011-10-21 16:54:12 | 显示全部楼层
没看明白
回复

使用道具 举报

Jeavi_·` 发表于 2011-12-15 01:23:53 | 显示全部楼层
这么好的帖子没人顶呢~收藏了~
回复

使用道具 举报

xiaomu 发表于 2011-12-17 15:51:14 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

catNull 发表于 2011-12-21 12:02:45 | 显示全部楼层
这个解决办法很有用,学习了。楼主辛苦了
回复

使用道具 举报

472317333 发表于 2012-4-3 21:56:36 | 显示全部楼层
看不懂
回复

使用道具 举报

踩风网 发表于 2012-6-7 11:12:46 | 显示全部楼层
很想学习,但是没看懂
回复

使用道具 举报

testtestt1 发表于 2014-5-6 15:19:36 | 显示全部楼层
tttttttttttttttttttttttttttttttttttt
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-16 07:46 , Processed in 0.046735 second(s), 5 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表