电脑爱好者之家

当前位置: 主页 > 开发资料 > 网页设计教程 >

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

时间:2012-11-22 23:35来源:未知 作者:熊猫蜀黍 点击:
做web页面的时候,笔者喜欢用Chrome进行调试。当然Chrome下调出来的页面,跟IE的兼容性是有很大问题的。好在IE8之后,IE的兼容性问题已经有了很大的改观。由于公司做的是企业应用,可以对用户所使用的软、硬件提出一定的要求,至少让他们在IE8及更高版本的浏

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

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

  1. <html>  
  2.     <head>  
  3.         <!-- Mimic Internet Explorer 7 -->  
  4.         <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>  
  5.         <title>My Web Page</title>  
  6.     </head>  
  7.     <body>  
  8.         <p>Content goes here.</p>  
  9.     </body>  
  10. </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显示。

(责任编辑:熊猫蜀黍)
织梦二维码生成器
顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容