经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › IE6和IE7的quirks mode

查看: 3571|回复: 5

[讨论] IE6和IE7的quirks mode [复制链接]

greengnn　楼主

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2008-2-15 14:13:01 |显示全部楼层

加入xml头部声明可以触发IE浏览器的Quirks mode，触发之后，浏览器解析方式就和IE5.5一样，拥有IE5.5一样的bug和其他问题，行为（Javascript）也是如此。

IE6的触发
在XHTML 的 DOCTYPE前加入xml声明

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

复制代码

IE7的触发
在xml声明和XHTML 的 DOCTYPE之间加入HTML注释

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

复制代码

IE6和IE7都可以触发的

在HTML 4.01的DOCTYPE文档头部加入HTML注释

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

复制代码

监测你的网页当前是那种兼容形态的脚本

javascript:alert(document.compatMode)

复制代码

提示：您可以先修改部分代码再运行

详情阅读
http://www.satzansatz.de/cssd/quirksmode.html

测试

提示：您可以先修改部分代码再运行

[ 本帖最后由 greengnn 于 2008-2-15 14:22 编辑 ]

blog Web标准化交流会 WEB标准群：23783439

西部数码顶级域名注册商39元抢注！

使用道具举报

karlen　

状元

高级会员 

帖子: 706
体力: 925
威望: 2

发表于 2008-2-15 16:32:21 |显示全部楼层

好贴呀,顶搂主,抢个沙发!!!继续研究你那一套...

http://www.mimibaike.com 秘密百科 http://www.css6.com

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

majer　

银牌会员

帖子: 411
体力: 1399
威望: 0
居住地: 福建省泉州市

发表于 2008-2-15 18:38:21 |显示全部楼层

原来如此，怪不得我加了xml头在ie6下一塌糊涂。

。。。。。。

怎么纠正呢？？？。。。

使用道具举报

fxn9801　

初级会员

帖子: 35
体力: 97
威望: 0

发表于 2008-3-6 13:04:43 |显示全部楼层

那不用加<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这个头是吗?

使用道具举报

fxn9801　

初级会员

帖子: 35
体力: 97
威望: 0

发表于 2008-3-6 13:36:21 |显示全部楼层

真是不知道到底问题在哪里!

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style/index2.css" rel="stylesheet" type="text/css" />
<title>无标题文档</title>
</head>
<body>
<div id="header">
<div class="hearder_passprot">
<div class="p1"><a href="#">注册</a></div>
<div class="p2"><label for="userName">用户名</label></div>
<div class="p2"><input id="userName" name="username" /></div>
</div>
</div>
</body>
</html>

复制代码

CSS样式如下:

/*首页样式*/
body,html{margin:0px;padding:0px;border:0px;font-size:12px;font-family:"宋体",arial;color:#000000;text-align:center;}
div,form,img,ul,ol,li,dl,dt,dd{margin:0; padding:0; border:0;}
h1,h2,h3,h4,h5,h6{ margin:0; padding:0;}
/*字体属性定义规则小写f加属性名称*/
.fB {font-weight: bold;}
.fI {font-style: italic;}
/* 字体大小*/
.f12px{ font-size:12px;}
.f14px{ font-size:14px;}
/*图像图标*/
.img1{border-style:solid;border-color:#F0852D;border-width:1px;}
/*链接样式*/
a:link{color:#000;text-decoration:none;}
a:visited{color:#000;text-decoration:none;}
a:hover{color:#666;text-decoration:underline;}
a:active{color:#000;text-decoration:none;}
/*登录框*/
#header{width:780px;height:83px;clear:both;margin-left:auto;margin-right:auto;margin-top:0px;background:#ffffff;}
.hearder_passprot{width:780px;height:35px;margin:0 auto;}
.hearder_passprot .p1{float:left; padding:11px 0 0 5px;}
.hearder_passprot .p2{float:left; padding:11px 0 0 5px;}
.hearder_passprot .p2 input{border:1px solid #000; width:50px; font-size:12px;}