打印

[讨论] IE6和IE7的quirks mode

greengnn [楼主]

酒酣几度
荣誉管理团队

帖子: 1058
体力: 1611
威望: 114
当前: 广东深圳
离线: 9 天

1^# 大中小发表于 2008-2-15 14:13 只看该作者

加入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"?> 

<!-- ... and keep IE7 in quirks mode --> 

<!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注释

复制内容到剪贴板

代码:

<!-- quirks mode --> 

<!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 编辑 ]

greengnn's space/web design
Design your life with Web Standards Web商业模式讨论群：38032840

TOP

karlen

状元
高级会员

帖子: 631
体力: 511
威望: 0
当前: 广东深圳
离线: 11 天

2^# 大中小发表于 2008-2-15 16:32 只看该作者

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

我讨厌div+css WEB民工群: 19746324

TOP

majer

高级会员

帖子: 265
体力: 542
威望: 0
当前: 福建泉州
离线: 1 天

3^# 大中小发表于 2008-2-15 18:38 只看该作者

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

。。。。。。

怎么纠正呢？？？。。。

TOP

fxn9801

初级会员

帖子: 30
体力: 78
威望: 0
离线: 8 天

发短消息

4^# 大中小发表于 2008-3-6 13:04 只看该作者

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

TOP

fxn9801

初级会员

帖子: 30
体力: 78
威望: 0
离线: 8 天

发短消息

5^# 大中小发表于 2008-3-6 13:36 只看该作者

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

代码如下:

复制内容到剪贴板

代码:

<!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"><!--TOP开始-->

    <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><!--TOP结束-->

</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;}

在IE7和火狐就正常:

到IE6就完全没有应用样式:

这到底是为什么呢?

[ 本帖最后由 fxn9801 于 2008-3-6 13:38 编辑 ]

TOP

fxn9801

初级会员

帖子: 30
体力: 78
威望: 0
离线: 8 天

发短消息

6^# 大中小发表于 2008-3-6 13:56 只看该作者

哎.真实苦笑不得啊!原来我样式表里有中文注释.
后来群里的朋友告诉我把注释改成:

/*注释*/改成//注释

就全好了！

TOP