浏览器兼容模式总结

想必你一定知道浏览器有个标准（Standards）模式和一个怪异（Quirks）模式，或许你还听说过有个“准标准(Almost Standards)”模式。而当你打开Internet Explorer的时候，又看到了什么浏览器模式、文档模式，还有什么兼容性视图等等...

三种模式

首先我们要知道，为什么会有这么多模式。其实这是个历史遗留问题，在浏览器大战时期，网景浏览器（Netscape Navigator）和微软的IE浏览器（Microsoft Internet Explorer）对网页分别有不同的实现方式，那个时候的网页要针对这两种浏览器分别开发不同的版本。而到了W3C制定标准之后，这些浏览器就不能继续使用这种页面了，因而会导致大部分现有站点都不能使用。基于这个原因，浏览器才引入两种模式来处理一些遗留的站点。

现在的浏览器排版引擎支持三种模式：怪异(Quirks)模式、准标准(Almost Standards)和标准(Standards)模式。在怪异模式中，排版引擎会模拟网景4和Windows中的IE5的行为；在完全标准的模式中，会尽量执行HTML和CSS规范所指定的行为；而在准标准模式中，则只包含很少的一部分怪异模式中的行为。

那么所谓标准模式，就一定都“标准”吗？答案当然是否定的，因为各个浏览器厂商实现标准的阶段不同，所以各个浏览器的“标准模式”之间也会有很大的不同。

Firefox、Safari、Chrome、Opera (自 7.5 以后)、 IE8 和 IE9 都有一个准标准模式。那么既然标准模式都不那么标准，准标准的模式肯定就更不标准了。最初的准标准模式只会影响表格中的图像，而后来各个浏览器又或多或少地进行了修改。那么什么情况下会触发准标准模式呢？是的，正如你所想到的，某些DOCTYPE会触发准标准模式，例如：

"-//W3C//DTD XHTML 1.0 Transitional//EN"
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"-//W3C//DTD HTML 4.01 Transitional//EN"
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"

一个完整的 DOCTYPE 例子如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

那么，既然这么多的DOCTYPE都会触发非标准的模式，那么如何才能触发标准模式呢？对了！要使用HTML5 DOCTYPE，即：

<!DOCTYPE html>

注意：如果文档中没有包含DOCTYPE或者包含了一个无法识别的DOCTYPE，则浏览器就会进入怪异模式。

下面简单说一下怪异模式。怪异模式有许多“怪异”的行为，主要是为了兼容那些遗留的古老页面而保留的模式。不同浏览器的怪异模式也不尽相同，它们都有自己的实现方式。怪异模式与标准模式的差异主要体现在盒模型（box model）、表格单元格高度的处理等。例如IE的怪异模式中，元素的width包含了padding和border，而标准模式中padding和border 并不属于宽度的一部分。

至此我们需要了解，浏览器有三种运行模式，即标准模式、准标准模式和怪异模式，要使用 <!DOCTYPE html> 来正确地触发标准模式。千万不要丢掉DOCTYPE声明，因为这会导致浏览器进入怪异模式。

IE的浏览器模式

IE8有4种模式：IE5.5怪异模式、IE7标准模式、IE8准标准模式和IE8标准模式，而IE9有7种模式: IE5.5怪异模式、IE7标准模式、IE8准标准模式、IE8标准模式、IE9准标准模式、IE9标准模式、XML模式。

其中XML模式是针对XML文档的，这里不打算阐述，细节可以看这篇文章[Defining Document Compatibility](http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx) 中有详细阐述。

在IE8及以后的的IE浏览器中，支持X-UA-Compatible头，可以通过在服务器端设置HTTP头，或者在页面中插入<meta>标签来实现：

HTTP:
Header set X-UA-Compatible "IE=8"
Meta:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

这种方法主要是防止老的页面在较新的浏览器中显示不正常的情况的，比如上面的代码可以强制IE8以上版本的浏览器以IE7的模式进行渲染。

注意，不要在新开发的网页中使用这种技术，这种技术只应该作为新老网页更替过程中的过渡方案。由于目前新开发的网页都是尽量支持最新版本的浏览器的，所以这种技术也会慢慢被淘汰，感兴趣的同学可以详细阅读微软的这篇文档。

这里我们需要知道有这种方式可以强制浏览器以某种模式运行，但只应作为过渡方案，不应在新开发的网页中使用。

解决方案

IE浏览器从IE8开始添加了兼容模式，开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题，如何禁止使用IE8兼容模式解析网页呢？在IE8以上版本的浏览器增加了一个X-UA-Compatible 头标记，用于为IE8指定不同的页面渲染模式。

于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式：

这段代码分别表示开启IE8和IE7的标准渲染模式。所以我们如果在网页中加上了代码:

或者:

,那么就设定要用IE8标准模式渲染网页，而不会使用兼容的模式。

还有一种情况，在IE8下只有不使用兼容模式页面才能显示正常，但是如果设定为IE8的模式，在IE9中却会导致CSS3失效。看来，需要针对 IE8、IE9 分别禁用兼容模式。怎么办呢？可以在后台判断浏览器版本，如果是IE8就输出content="IE=8"，如果是IE9就输出content="IE=9"。其实还可以单纯通过HTML来实现的，HTML代码如下：

<metahttp-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE">

其内容随著指定的页面模式而更改，当要模拟IE8时，指定IE=IE8，指定IE=5, IE=7, 或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的最高模式。

经测试后完美解决了兼容模式问题，这样设置后IE中设置兼容模式的按钮也会消失，可以按F12打开“开发人员工具”来检查浏览器模式。

X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外，它必须出现在网页header节其它元素之前的位置。

参考: http://www.csdn.net/article/2012-10-22/2811049

浏览器兼容模式总结相关推荐

解决360浏览器兼容模式的页面显示问题
解决360浏览器兼容模式的页面显示问题参考文章: (1)解决360浏览器兼容模式的页面显示问题 (2)https://www.cnblogs.com/njy888888/p/7827200.html ...
360安全浏览器兼容模式怎么设置_测试新手一定要知道：最实用的Web兼容性测试经验都在这...
在日常工作中,我们经常碰到网页不兼容的问题.我们之所以要做兼容性测试,目的在于保证待测试项目在不同的操作系统平台上正常运行. 主要包括待测试项目能在同一操作系统平台的不同版本上正常运行:待测试项目能与 ...
偏偏在面试的时候踏入一个大坑--360浏览器兼容模式
之前从来没使用过360浏览器,也不知道他有兼容模式和极速模式.在线打开之前做过的案例(兼容模式),就完全傻眼了-乱七八糟.很绝望(最气人的是当时竟然没想到换个浏览器试试,哎,第一次面试果然让人记忆深刻 ...
自己碰到的360安全浏览器兼容模式的问题总结
公司之前做的网站项目现在兼容性出了问题,让我负责调试,我就懂一点前端代码,什么的DIV+CSS,hack都不了解,所以上网查了很多资料,也算是小有收获.此贴仅作为个人经验贴,大神还请指点. 遇到的问题 ...
QQ浏览器及360浏览器兼容模式下怎么处理sessionStorage数据
现在很多网站都需要在兼容模式和极速模式下都适应,开发的时候一般都是谷歌浏览器,前端需要存储一些本地信息,一般用的最多的是localStorage跟sessionStorage.极速模式下或者谷歌浏览器 ...
解决echarts在360浏览器兼容模式和ie浏览器不兼容问题
问题一:js 脚本在360浏览器兼容模式会被阻止,需要手动允许程序才能运行. 问题二:js 脚本在ie浏览器会弹出 "echarts lnternet Explo ...
jsp页面360浏览器兼容模式不兼容问题解决方法
众所周知,360浏览器兼容模式是个很蛋疼的模式,让无数开发人员头疼脑热.鄙人也遇到了,为留纪念,特附解决方法如下: 1.在<head>标签前插入 <!DOCTYPE html PUB ...
IE浏览器兼容模式设置
在浏览器的发展历史中,出现过多家厂商争夺市场,导致同时存在两种标准:后W3C出面制定了HTML5,总算结束纷争.而某些网站却仍采用原有标准,为了兼容在IE8 IE9中变出现了兼容浏览模式,英文为Co ...
成功解决~请使用IE浏览器(兼容模式)
成功解决~请使用IE浏览器(兼容模式) 目录解决问题解决思路解决方法 1.图文教程解决问题请使用IE浏览器(兼容模式) 解决思路有些网站版本比较旧,所以新的浏览器不能兼容,需要调低或者选择 ...
win11的edge浏览器兼容模式的设置方法
win11的edge浏览器兼容模式怎么设置?当我们使用edge浏览器时开启兼容模式会提升我们浏览网页的体验感,那要如何设置呢?下面小编带来了相关教程,一起看看吧. win11的edge浏览器兼容模式的 ...

浏览器兼容模式总结

浏览器兼容模式总结相关推荐

最新文章

热门文章

浏览器兼容模式 总结

浏览器兼容模式 总结相关推荐

最新文章

热门文章

浏览器兼容模式总结

浏览器兼容模式总结相关推荐