浏览器兼容性问题

Posted To Be Yourself

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器兼容性问题相关的知识，希望对你有一定的参考价值。

浏览器兼容性模式

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

这些都是什么？啥是浏览器模式，啥是文档模式？标准模式和准标准的模式有什么区别？IE9兼容性视图和真正的IE9有什么区别？什么情况下会触发这些模式，又该怎样才能检测到浏览器当前处于哪种模式中呢？本文将详细为你解答这些疑问。

三种模式

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

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

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

Firefox、Safari、Chrome、Opera (自 7.5 以后)、 IE8 和 IE9 都有一个准标准模式。那么既然标准模式都不那么标准，准标准的模式肯定就更不标准了。最初的准标准模式只会影响表格中的图像，而后来各个浏览器又或多或少地进行了修改。

如果在Firefox中插入这种DOCTYPE，并在页面中插入一个空的span标签，那么在Firebug中查看元素的布局就会发现不同：

准标准模式中元素的line-height被忽略了，元素既没有宽度也没有高度：

 

标准模式中元素仍然保留了line-height，拥有18px的高度：

 

在Firefox浏览器中，使用鼠标右键->查看页面信息 可以看到当前浏览器运行在何种模式（只能看到“混杂模式”和“标准规范模式”两种表示）：

 

鉴于目前一些最新版本的浏览器已经放弃了准标准模式，所以关于准标准模式的细节这里就不再赘述了，

那么，既然这么多的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模式。

在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的模式进行渲染。

浏览器模式与文档模式

如果你使用的是IE9，那么按下F12键就会出现开发者工具，上面有两个下拉菜单：浏览器模式和文档模式。那么什么是浏览器模式？什么又是文档模式？二者有何区别？

浏览器模式用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件注释解析、以及发送给网站服务器的用户代理（User-Agent）字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和及安装的功能，这样就可以根据不同的浏览器返回不同的页面内容了。

文档模式用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新，但不会更改用户代理字符串中的版本号，也不会从服务器重新下载网页。切换浏览器模式的同时，浏览器也会自动切换到相应的文档模式。

一言以蔽之，浏览器模式会影响服务器端对客户端浏览器版本的判断，对条件注释也有影响；而文档模式会影响IE的排版引擎，对网页渲染会有影响，对CSS hack也会产生影响。因此，通过条件注释可以判断浏览器模式，而使用CSS hack可以判断文档模式。

如果我们使用一句简单的javascript语句来查看用户代理（User-Agent）字符串的值，则可以看到IE9兼容性视图与IE9的区别：

  1. <script type="text/javascript"> 
  2. alert(\'UA:\'+navigator.userAgent);  
  3. </script> 

输出结果如下所示，注意其中的MSIE版本号已经不同。判断浏览器模式就是判断User-Agent中的版本号，即MSIE后面的数值：

  1. // IE9  
  2. UA:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)  
  3.  
  4. // IE9 兼容性视图  
  5. UA:Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0) 

话说IE9兼容性视图是模拟IE7的行为，那么IE9兼容性视图与IE7有没有区别呢？肯定是有区别的，即使是IE9中的IE7标准模式，与原生的IE7在渲染上也是有区别的，具体我们暂不去深究。

那么既然IE9兼容性视图的版本号跟IE7相同，如何才能判断当前是IE9兼容性视图，还是纯正的IE7呢？其实很简单，只需要判断浏览器的用户代理（User-Agent）字符串中是否包含Trident即可。首先检测MSIE的版本号是否为7.0，然后再判断是否含有Trident字串，若包含则为IE9兼容性视图，否则则为纯正的IE7。

小结：至此，你应该了解了什么是浏览器模式、什么是文档模式以及它们之间的区别了，另外还了解了IE9兼容性视图与IE9以及IE7的区别。

 

IE=EmulateIE7 标签的作用

对于 Web 开发人员来说，文本兼容性是一个要考虑的重要问题。Windows Internet Explorer 8 引入了文本兼容性模式，该模式允许 Web 开发人员将浏览器设置为以与旧版本相同的方式显示网页，从而允许开发人员选择更新时间。

本文档将介绍由 Windows Internet Explorer 8 支持的文本兼容性模式，以及如何使用自定义标头基于每个页面或每个站点实现这些模式。实现适当的兼容性模式后，可以确保站点与 Windows Internet Explorer 8 及更高版本兼容。

各种兼容性模式

Windows Internet Explorer 8 支持多种兼容性模式，它们可启用不同的受支持的功能，并影响内容的呈现方式。例如，

IE5 模式呈现内容时，像是使用了 Windows Internet Explorer 7 的 Quirks 模式，这与 Windows Internet Explorer 5 显示内容的方式很相似。

IE7 模式呈现内容时，无论页面是否包含 <!DOCTYPE> 指令，都像是使用了 Windows Internet Explorer 7 的标准模式。

EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以 Windows Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，EmulateIE7 模式遵循 <!DOCTYPE> 指令。对于多数网站来说，它是首选的兼容性模式。

IE8 模式最大限度地支持行业标准（包括 W3C Cascading Style Sheets Level 2.1 Specification 和 W3C Selectors API，并能有限支持 W3C Cascading Style Sheets Level 3 Specification（工作草案）。

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。对于 Windows Internet Explorer 8，这与 IE8 模式是等效的。如果（假定）Windows Internet Explorer 的未来版本支持更高级别的兼容模式，设置为 Edge 模式的页面将显示在由该版本支持的最高级别模式中；但是，当使用 Windows Internet Explorer 8 查看时，这些相同的页面仍将显示在 IE8 模式中。由于在 Windows Internet Explorer 的未来版本中呈现页面内容可能出现意外，建议 Web 开发人员将 Edge 模式仅用于测试页面和其他非生产活动。

基于每个页面指定兼容性模式

要为网页指定文本模式，请使用 META 元素，以在该网页中包含 X-UA-Compatible http-equiv 标头。以下示例指定了 EmulateIE7 模式兼容性。

HTML：

<html>

      <head>

      <!-- Mimic Internet Explorer 7 -->

         <title>我的网页</title>

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

      </head>

      <body>

         <p>内容在此处。</p>

      </body>

</html>

Content 属性指定了该页面的模式；例如，要模仿 Windows Internet Explorer 7 的行为，请指定 IE=EmulateIE7。同样，可指定 IE=5、IE=7 或 IE=8 以选择其中一种兼容性模式。您还可以指定 IE=edge 以通知 Windows Internet Explorer 8 使用最高级别的可用模式。

X-UA-compatible 标头不区分大小写.

基于每个站点指定兼容模式

通过使用 Web 服务器为站点定义自定义 HTTP 响应标头，可为网站指定文本模式。HTTP 响应标头是 Web 服务器附加到为响应 HTTP 请求而发送到浏览器中的文件的信息，这些信息通常包含发送回文件的日期、大小和类型。

下列文档介绍了将 Web 服务器配置为将自定义 HTTP 响应标头附加到所有网页中所需的步骤。这将导致 Windows Internet Explorer 8 使用指定的文本兼容性模式，例如 EmulateIE7。

在 IIS 上实现 META 切换

在 Apache 上实现 META 切换

如果使用 Web 服务器指定了默认文本兼容性模式，则可通过在特定的网页中指定其他文本兼容性模式来覆盖该设置。在该网页中指定的模式优先于由服务器指定的模式。

您可以使用以下 web.config 示例。

XML

<?xml version="1.0" encoding="utf-8"?>

<configuration>

   <system.webServer>

      <httpProtocol>

         <customHeaders>

            <clear />

            <add name="X-UA-Compatible" value="IE=EmulateIE7" />

         </customHeaders>

      </httpProtocol>

   </system.webServer>

</configuration>

您也可以在基于 Windows Server 2008 的计算机上配置 IIS 7 以包含自定义 HTTP 响应标头，步骤如下：

  • 依次单击“开始”、“管理工具”，然后单击“Internet Information Services (IIS) 管理器”。
  • 在“连接”窗格中，展开服务器的节点，然后展开“站点”。
  • 单击要添加自定义 HTTP 响应标头的网站。
  • 在网站窗格中，双击“IIS”部分中的“HTTP 响应标头”。
  • 在“操作”下，单击“添加”。
  • 在“名称”框中，键入“X-UA-Compatible”。在“值”框中，键入 IE=EmulateIE7。
  • 单击“确定”。

 

 

给网站添加X-UA-Compatible标签

X-UA-Compatible是神马？

X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页，在html的<head>标签中使用。

为什么要用X-UA-Compatible？

在IE8刚推出的时候，很多网页由于重构的问题，无法适应较高级的浏览器，所以使用X-UA-Compatible标签强制IE8采用低版本方式渲染。

使用下面这段代码后，开发者无需考虑网页是否兼容IE8浏览器，只要确保网页在IE6、IE7下的表现就可以了。

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

时至今日，IE6已被微软判了死刑，我们在重构时应首先考虑更完善的IE8下的体验，然后依次回退兼容IE7和6。令我担忧的情况是当IE9正式发布时如果IE6在国内还没被淘汰，那么将出现前端工程师需要面临4个IE版本的疯狂局面（且4个版本显示差异较明显）。

给网站添加X-UA-Compatible标签

我建议使用下面的X-UA-Compatible标签：

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

IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame

网页中添加方法

在<head>下面添加上述代码即可。WordPress则在主题header.php文件里做修改。

这样的方法简单快捷，但是弊端是代码将无法通过W3C验证。其实这并不是问题，毕竟标准只是标准，如果只有这一个“错误”完全不会有任何不良的影响。

当然你可能像Sivan一样有代码洁癖和一定程度的标准癖，那么我们还可以从服务器端进行这个设置，请继续往下看。

Apache服务器设置方法

嗯⋯⋯我们可以在Apache主机做一些设置让服务器告诉IE采用何种引擎来渲染。在网站作用目录找到或新建.htaccess文件，添加下面的内容保存即可。

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

nginx服务器设置方法

现在很多朋友使用Nginx作为搭建环境，当然也是OK的。找到\\nginx\\conf\\nginx.conf并编辑，在server { }区域里（最好是闭合符前面起一行）添加下列代码即可

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

不清楚具体位置的请参考paul irish的配置文件。

好啦，上面就是3种常用的添加方法。我认为这个标签主要是为重构者服务，如果代码的兼容性很强那么不用也罢。

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

 

参考：深入理解浏览器兼容性模式

      IE=EmulateIE7 标签的作用

     给网站添加X-UA-Compatible标签

以上是关于浏览器兼容性问题的主要内容，如果未能解决你的问题，请参考以下文章

十条jQuery代码片段助力Web开发效率提升

几个非常实用的JQuery代码片段

30秒就能看懂的JavaScript 代码片段

片段如何处理触摸？

android 兼容性包 - 片段...未附加到 Activity

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js