利用X-UA-Compatible定义网页在IE下的兼容状态

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

这个貌似是随着IE8诞生而出现的东东,具体有什么用呢?不妨先参考一下微软MSDN的《定义文档兼容性》这篇文章。说白了X-UA-Compatible就是指定IE8或者以上版本以何种模式渲染网页。

应用场景,比如说我们在IE7的情况下设置调整好网页的正确渲染方式,的确,我们的网页在IE7下看起来正常了,但是IE8的出现可能会击毁我们原先美好的设想,那就是IE7下正常,以后版本的IE肯定也正常了,其实不然,微软在发布每一款浏览器时必定会对浏览器做一些调整,往往这些调整会让我们某些定义的布局出现意料外的状况,但是大家可能不想再加班加点的去修改现有的布局来适应新的浏览器,有没有一劳永逸的办法呢?答案就是X-UA-Compatible,有了它,我们的时光可以永远停留在IE7时代,当然,这可能有些不思进取,我还是建议你在下次网站改版时做好IE8、IE9及现有版本IE的兼容工作。

如果你需要让IE8、IE9或更高版本以IE7的兼容方式渲染网页的话,请在头标签定义如下的meta元标签。

1
2
3
4
5
6
7
8
9
10
<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  <title>My Web Page</title>
</head>
<body>
  <p>Content goes here.</p>
</body>
</html>

value指定“IE=5”、“IE=7”或“IE=8”可选择相应的兼容性模式。 还可以指定“IE=edge”以告诉 Internet Explorer 8 使用可用的最高级别模式。

但是对于W3C标准比较关注的童鞋可能会发现,定义meta标签的方式可能会导致HTML5标准检测不通过,或者说挨个加meta标签太麻烦,那有什么办法避免呢?其实X-UA-Compatible可以写入HTTP Response Header(HTTP响应头中),对于Apache .htaccess定义如下。

1
2
3
<FilesMatch ".(html|htm|php|aspx|asp)$">
Header set X-UA-Compatible "IE=EmulateIE7"
</FilesMatch>

对于支持ASP.NET的IIS服务器可以在web.config定义如下节点:

1
2
3
4
5
6
7
8
9
10
11
<?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>

2012年2月6日更新

对于Nginx服务器来说只需要在配置文件中使用add_header指令就可以了,add_header指令可以加在http, server, 或者 location节中:

# 比如如下指令则在header中告知IE始终以当前最先进的方式展示页面
add_header X-UA-Compatible IE=edge,chrome=1;
若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!
请稍后...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*