指定页面模式,避开IE兼容性问题
做web页面的时候,笔者喜欢用Chrome进行调试。当然Chrome下调出来的页面,跟IE的兼容性是有很大问题的。好在IE8之后,IE的兼容性问题已经有了很大的改观。由于公司做的是企业应用,可以对用户所使用的软、硬件提出一定的要求,至少让他们在IE8及更高版本的浏览器运行系统的要求不算苛刻,于是兼容性问题就好办多了。但是,由于IE8及IE9有“兼容模式”的感念,如果不对页面进行一定的设置,浏览器可能会自动启用兼容模式,并使用Quirks模式或者IE7文档模式对页面进行解析,出现兼容性问题就在所难免了。
我们可以指定页面的文件模式,在网页中使用meta元素放入X-UA-Compatible http-equiv 标头。以下是指定为模拟 IE7 模式的范例:
<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> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。例如,添加:
<metahttp-equiv="charset"
content="iso-8859-1"><metahttp-equiv="expires"
content="31 Dec 2008">
这样发送到浏览器的头部就应该包含:
content-type: text/htmlcharset:iso-8859-1expires: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显示。