本地ie打开html布局乱,网页设计：浏览器在兼容模式下布局全乱了 – 解决办法...

在chrome、ie浏览器中显示均正常，为何用360或搜狗等浏览器的兼容模式查看网页布局会全乱了呢？

解决办法：在head中添加一个meta标签，指定兼容模式。因为旧的ie浏览器与chrome等浏览器的解释方式差别较大，因此个人经验是指定较高的兼容模式即可，如ie8。

兼容性对于网页设计师来说非常重要。虽然最好是建立一个完全不需依赖任何网页浏览器特性或功能的网站，但是有时候这是不可能实现的。而文件兼容模式能将网页限制在某个特定版本的IE中。

可以使用 X-UA-Compatible 标头来指定网页支持的IE版本，可以使用 document.documentMode 来判定网页的兼容性模式。

通过选择支持某个特定版本的IE，你可以确保你的网页在未来的浏览器版本中也能显示一致。

指定网页兼容性模式

要为网页指定兼容模式，需要在网页中使用 meta 元素放入 X-UA-Compatible  http-equiv 标头。以下范例是指定网页为 IE7 兼容模式。

复制代码

不过前两天给一个网站调试的时候发现他连续加了两个版本的兼容，结果没有任何变化，结果查了下资料原来是IE浏览器只能读第一个兼容的代码后面的都不认！

即：IE只会执行网页中第一个 X-UA-Compatible 标头。可以使用多个属性值来指定网页兼容模式，这能使网页在将来的浏览器版本中保持显示一致。如果需要设置多个兼容模式，使用分号分开各个模式。

如果一个特定版本的 IE 支持的可用兼容模式多于一种，则将采用列于标头属性中最高的可用模式。尽管不推荐这样做，但是可以使用这个特性来排除特定的兼容模式。下面的例子将会排除 IE7 模式。

复制代码

常用兼容标头如下：

各种兼容模式代码范例：

复制代码

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

复制代码

无论页面是否包含 指令，均使用 Windows Internet Explorer 7 的标准渲染模式。

复制代码

开启 IE8 的标准渲染模式，但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本，因此等同于冗余代码。

复制代码

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。

复制代码

EmulateIE7 模式通知 Windows Internet Explorer 使用 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，EmulateIE7 模式遵循 指令。