使用页面模式,避免IE浏览器兼容性问题

做web页面的时候，笔者喜欢用Chrome进行调试。当然Chrome下调出来的页面，跟IE的兼容性是有很大问题的。好在IE8之后，IE的兼容性问题已经有了很大的改观。由于公司做的是企业应用，可以对用户所使用的软、硬件提出一定的要求，至少让他们在IE8及更高版本的浏览器运行系统的要求不算苛刻，于是兼容性问题就好办多了。但是，由于IE8及IE9有“兼容模式”的感念，如果不对页面进行一定的设置，浏览器可能会自动启用兼容模式，并使用Quirks模式或者IE7文档模式对页面进行解析，出现兼容性问题就在所难免了。

我们可以指定页面的文件模式，在网页中使用meta元素放入X-UA-Compatible http-equiv 标头。以下是指定为模拟 IE7 模式的范例：

[html] view plain copy print ?

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>My Web Page</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>

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

其内容随著指定的页面模式而更改，指定IE=5, IE=7, 或IE=8即对应选择其中一种兼容性模式。我们也可以指定IE=edge来指示IE8使用它支持的最高模式。

http-equiv 属性

meta元素的http-equiv 属性指示服务器在发送实际的文档之前，先在要传送给浏览器的 MIME 文档头部包含名称/值对。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2007

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

X-UA-compatible标头没有大小写之分，这个属性只对IE浏览器起作用。然而除了title元素及其他的meta元素之外，它必须出现在网页head节点其它元素之前的位置。

判定文件兼容性模式

要判定网页使用IE浏览器时的文件兼容性模式，只需查看document object(文档对象)的documentMode属性（当然，只有IE浏览器才有这个属性）。例如在IE8的地址栏输入下列代码会显示目前页面的文件模式。

javascript:alert(document.documentMode);

关于DOCTYPE：

IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirks mode"为预设，这会使页面以旧版本浏览器的视点显示，"Standards mode"(也称为"strict mode")特点是支持业界标准最为完善。然而要利用这个增强的支持功能，网页必须包含恰当的<!DOCTYPE>指令。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">

若一个网页没有包含<!DOCTYPE>指令，IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE>指令但浏览器无法辨识，IE6会将它以IE6 standards mode显示。

(责任编辑：熊猫蜀黍)

搜索

热门标签: