`
he91_com
  • 浏览: 370672 次
文章分类
社区版块
存档分类
最新评论

指定页面模式,避开IE兼容性问题

 
阅读更多
<style type="text/css"> <!-- p {text-indent:2em} --> </style>

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

我们可以指定页面的文件模式,在网页中使用meta元素放入X-UA-Compatiblehttp-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> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。例如,添加:

<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浏览器时的文件兼容性模式,只需查看documentobject(文档对象)的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显示。


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics