IE下页面样式错乱，其他浏览器正常

最新推荐文章于 2021-08-03 20:11:32 发布

认真的慵懒

最新推荐文章于 2021-08-03 20:11:32 发布

阅读量7.1k

点赞数

分类专栏：程序兼容文章标签： meta http-equivX-UA- meta IE浏览器 contentIEEmulateIE7 ie

本文链接：https://blog.csdn.net/aspnetjp/article/details/51002363

版权

程序兼容专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、遇到的问题

页面样式在其他浏览器（Chrome、360、Edge等）都表现正常；单单在IE浏览器表现不正常，IE中鼠标滑过导航菜单，导航菜单向左移导致样式不正常；其他浏览器正常表现为固定不动；

2、具体原因

此声明其实就是把IE8当做IE7用

未来兼容性中的 META 标记和锁定注意：本文档是预备文档，随时可能变更。

对于 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 模式呈现内容时，无论页面是否包含指令，都像是使用了 Windows Internet Explorer 7 的标准模式。

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

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>
     <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 标头不区分大小写；但是，它必须显示在网页中除 TITLE 和其他 META 元素以外的所有元素之前的标头（HEAD 部分）中。

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

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

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

使用脚本确定文本兼容性模式
要使用 Windows Internet Explorer 8 确定网页的文本兼容性模式，请使用 document 对象的 documentMode 属性。例如，将以下内容键入到 Windows Internet Explorer 8 的地址栏中，可显示当前网页的文本模式。

javascript:alert(document.documentMode);

documentMode 属性可返回与页面的文本兼容性模式相对应的数值。例如，如果所选页面支持 IE8 模式，则 documentMode 会返回 8。

注意：在 Windows Internet Explorer 6 中引入的 compatMode 属性已不受支持，取而代之的是在 Windows Internet Explorer 8 中引入的 documentMode 属性。当前使用 compatMode 的应用程序仍然可以在 Windows Internet Explorer 8 中运行；但是，它们已更新为使用 documentMode。