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

最新推荐文章于 2023-04-13 15:35:42 发布

林深见鹿dw

最新推荐文章于 2023-04-13 15:35:42 发布

阅读量1.8k

点赞数

分类专栏： Html 文章标签： IE下的兼容

Html 专栏收录该内容

7 篇文章

订阅专栏

本文深入解析X-UA-Compatible标签的作用与应用场景，提供了一劳永逸的网页兼容性解决方案，帮助开发者在不同浏览器环境下保持网页的正确渲染方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

<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定义如下节点：

<?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;



转载：http://wangye.org/blog/archives/125/