`
JACKY&HUA
  • 浏览: 35413 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多
系统前端之前的要求是IE7/8/9 , 客户提出要兼容IE10。通过测试发现了不少兼容问题,修改起来肯定要花不少时间。在网上搜了一下,发现原来一行代码就可以搞定。下面是一篇我认为较好的介绍。


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[1]。

网页中添加方法

在<header>下面添加上述代码即可。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在内的众多现代网页技术

原文地址:http://lightcss.com/add-x-ua-compatible-meta-to-your-website/


在使用这个标签时,还要注意一些细节,否则标签不能起到期望的作用。

下面一篇同样来自网上的介绍。

关于IE9中X-UA-Compatible失效的问题

今天在IE9中调试Wordpress主题的时候发现无论X-UA-Compatible如何设置,IE9都是用Quirks Mode渲染,好端端的W3C标准页面被硬生生渲染成IE5,惨不忍睹。而在F12工具中强制调成IE9标准渲染模式,全部正常。于是研究了一下问题在哪。

关于X-UA-Compatible和IE的Quirks Mode模式,Google一下有很多说明,这里有三篇很详细的文章[1][2][3]:

http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
http://www.fantxi.com/blog/archives/browser-mode/
http://blog.csdn.net/wingeek/article/details/6198996


先上我主题header.php的源码。这个源码是从官方自带主题twentyeleven修改而来的,结构没有什么变动:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if IE 9]>
<html id="ie9" <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<![endif]-->
<!--[if lte IE 8]>
<html id="ie" <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<![endif]-->
<!--[if !(IE)]><!-->
<html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-Type" charset="<?php bloginfo( 'charset' ); ?>" />


上面第12行无论如何设置content都是无效的,IE9不会识别。   搜索了一下,发现有两种说法。一种认为在X-UA-Compatible之前必须至少有一个meta标签[4]。另一种说法是X-UA-Compatible之前不能有script标签[5],后一种说法应该是比较靠谱的,因为在官方的说明文章里有这么一句[1]:

The X-UA-Compatible header is not case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.

但问题是我源码的相应位置并没有script标签。迟疑很久,我怀疑是之前IE注释的问题,不仅如此,经过调试发现这些注释在IE中根本没有生效(IE注释的作用见参考资料[6])。于是试着把它去掉变成:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-Type" charset="<?php bloginfo( 'charset' ); ?>" />


一切恢复正常了。然后我把IE注释移到body标签,注释也生效了。

结论:为防止失效,X-UA-Compatible最好紧跟在head之后,之前不要有任何不标准的标签。


原文地址:http://www.swingworks.net/2011/08/x-ua-compatible_breaks_in_ie9/

分享到:
评论

相关推荐

    使用X-UA-Compatible来设置IE浏览器兼容模式

    为了缓解这个问题,微软引入了`X-UA-Compatible`元标签,它允许开发者指定IE浏览器应以何种模式解析和渲染网页。本文将深入探讨`X-UA-Compatible`的含义、重要性以及如何使用。 ### 文件兼容性的重要性 随着IE的每...

    关于IE8兼容:X-UA-Compatible属性的解释

    在 `X-UA-Compatible` 属性中添加 `chrome=1` 如下: ```html &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"&gt; ``` 这将激活Google Chrome Frame插件,如果用户已经安装了这个插件,那么在支持的...

    content=”IE=7, IE=9″意思理解

    为了解决这个问题,可以在网站头部添加`&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"&gt;`来强制IE8使用IE7的标准模式。而`&lt;meta http-equiv="X-UA-Compatible" content="IE=7, IE=9"&gt;`则进一步扩展了...

    深入浅出meta标签

    2. **X-UA-Compatible Meta标签** 这个标签主要用于Internet Explorer浏览器,告知浏览器应使用哪种IE版本进行渲染。例如: ```html &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; ``` `IE=edge` ...

    浏览器的CSS兼容问题

    为了解决IE8及以下版本的兼容性问题,引入了`X-UA-Compatible`元标签,用于控制IE浏览器的渲染模式。具体用法如下: - `&lt;meta http-equiv="X-UA-Compatible" content="IE=5"/&gt;`:强制IE8使用IE5的渲染模式,即...

    IE7与IE8的兼容性 配置文档

    在探讨IE7与IE8的兼容性配置时,我们首先需要理解的是,随着技术的不断进步,不同版本的...在实际操作中,根据网站的具体情况选择最合适的`X-UA-Compatible`值至关重要,以确保用户体验的一致性和网站功能的完整性。

    .net IE8.0排版混乱问题解决

    在.NET项目中,解决IE8排版混乱问题的关键在于正确使用`&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/&gt;`这样的元标签。这个标签的作用是指示IE8(以及更高版本的IE)模拟特定版本的IE进行渲染,以...

    IE兼容插入代码

    具体步骤包括添加新的自定义响应标头,如“X-UA-Compatible”,并设定其值为“IE=EmulateIE7”。 对于其他类型的服务器,如Apache,也有相应的配置方法,虽然这里没有详细展开,但通常涉及修改服务器的配置文件以...

    WEB程序兼容IE代码

    - **作用解释**:上述代码通过修改`web.config`文件中的`&lt;customHeaders&gt;`部分,添加了一个名为`X-UA-Compatible`的自定义HTTP响应头,其值为`IE=EmulateIE7`,表示让所有访问该网站的IE浏览器均以IE7模式渲染页面。...

    一句代码解决IE8兼容问题.docx

    保存并应用这个配置后,IIS会自动为所有请求添加`X-UA-Compatible`响应头,使IE8始终处于IE7兼容模式。 方法三:使用IIS管理员工具进行设置。如果你不熟悉XML配置或觉得手动编辑`web.config`麻烦,可以通过IIS管理...

    设置IE8使用IE7的样式的代码

    总结以上所述,通过设置X-UA-Compatible元标签为`&lt;meta http-equiv="x-ua-compatible" content="ie=7" /&gt;`,可以实现让IE8浏览器使用IE7的样式和功能,从而让网站在不同版本的IE浏览器中表现得尽可能一致。...

    IE中引入GoogleChromeFrame插件.docx

    1. **激活GCF**:要在特定页面上激活GCF,可以通过添加`X-UA-Compatible` HTTP头部或Meta标签来指定。 ```html &lt;meta http-equiv="X-UA-Compatible" content="chrome=1"&gt; ``` 这个Meta标签告诉IE浏览器使用GCF...

    domino xpages 开发 引用head说明

    在XPages中,可以使用`&lt;xp:metaData&gt;`标签来实现相同的效果,如`&lt;xp:metaData httpEquiv="X-UA-Compatible" content="IE=edge"&gt;&lt;/xp:metaData&gt;`。 2. **字符编码**: - `&lt;meta charset="utf-8"&gt;`用于设定页面的...

    IE浏览器和火狐浏览器兼容问题有部分js

    在IE8及以上版本中,可以通过在`&lt;head&gt;`标签中添加`&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"&gt;`来强制浏览器使用特定版本的渲染模式。这在解决IE7、IE8的兼容性问题上非常有效。 #### CSS Hack ...

    headers-more-nginx-module-0.34

    more_set_headers 'X-UA-Compatible: IE=edge'; ``` 2. `more_clear_headers`: 用于清除指定的HTTP响应头。 示例: ``` more_clear_headers 'Server'; more_clear_headers 'Set-Cookie'; ``` 3. `more_add...

    解决IE6、IE7、IE8样式不兼容问题

    为了区分不同的IE版本,开发者可以利用条件注释(Conditional Comments)和X-UA-Compatible元标签来针对性地应用特定的CSS规则。例如: ```html &lt;!--[if IE 6]&gt; &lt;![endif]--&gt; ``` ```html &lt;meta http-equiv="X-...

    ie8自动设置 兼容性代码

    要在网页中指定兼容性模式,需使用`&lt;meta&gt;`标签插入X-UA-Compatible HTTP-Equiv头部。例如,要设置IE8 Standards Mode,可以在HTML文档的`&lt;head&gt;`部分添加如下代码: ```html &lt;meta http-equiv="X-UA-Compatible" ...

    修复网页在IE8 下的显示兼容问题

    &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt; ``` 这段代码告诉IE8使用IE7的渲染引擎来解析和显示网页内容,从而避免因标准模式下的不兼容问题而产生的布局混乱。这种方式对于那些没有进行标准...

    浏览器兼容性设置级解释

    2. **添加`&lt;meta&gt;`标签**:如`&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;`,使IE尽可能使用最新版本的渲染引擎。 3. **CSS Hack**:根据需要针对不同浏览器编写特定的CSS规则。 4. **使用前缀**:为CSS...

    CSS 忍者.doc

    为了防止页面在IE中被强制按照低版本的渲染模式加载,应使用`X-UA-Compatible`元标签来设置浏览器的渲染引擎模式: ```html &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt; ``` 此标签告诉IE使用最新、最...

Global site tag (gtag.js) - Google Analytics