新手请教IE6 7标准怪异盒模型的问题
这几天学习了下盒模型 自己做了下实验看论坛和书上得知
---------------------
ie6在怪异模式(quick mode)下 盒模型宽度=width+margin / ie6 在标准模式下 盒模型正确 盒模型宽度=width+padding+border
ie7在怪异模式和标准模式下 盒模型都正确 盒模型宽度=width+padding+border
----------------------
我自己做了下实验 但结果和自己的认识不同
1、以下第一个代码在没有加doctype的情况下 浏览器选择自己的模式 怪异模式(QUICK MODE)
显示结果 我在PS里进行测量 结果 长度IE6 IE 7 盒模型的实际宽度都为200PX 内容宽度为140PX
2、以下第二个代码在加doctype的情况下 采用标准模式
显示结果 经过测量 结果 长度ie6 7盒模型的实际宽度都为260px 内容宽度为200px
------------------------
ie6 用的multiple ie
不知道是哪出了问题 为什么IE7在quick mode盒模型也不对 我哪做错了？
[html]
<head>
<title>无标题文档</title>
<style type="text/css">
html,body{
margin:0;
height:100%;
}
.abc{
width:200px;
height:200px;
padding-left:20px;
padding-right:20px;
border:10px solid #000000;
background:#CCCCCC;
position:relative;
left:50%;
margin-left:-100px;
}
.abc p{
background:#33FF33;
height:100%;
}
</style>
</head>
<body>
<a href="javascript:m=(document.compatMode=='CSS1Compat')?'Standards':'Quirks';window.alert('You%20are%20in%20'%20+%20m%20+%20'%20mode.');">测试是否为QorS Mode
</a>
<div class="abc">
<p>内容内容内容内容</p>
</div>
</body>
[/html]
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
<style type="text/css">
html,body{
margin:0;
height:100%;
}
.abc{
width:200px;
height:200px;
padding-left:20px;
padding-right:20px;
border:10px solid #000000;
background:#CCCCCC;
position:relative;
left:50%;
margin-left:-100px;
}
.abc p{
background:#33FF33;
height:100%;
}
</style>
</head>
<body>
<a href="javascript:m=(document.compatMode=='CSS1Compat')?'Standards':'Quirks';window.alert('You%20are%20in%20'%20+%20m%20+%20'%20mode.');">测试是否为QorS Mode
</a>
<div class="abc">
<p>内容内容内容内容</p>
</div>
</body>
[/html]
[[i] 本帖最后由 ilovejy 于 2008-3-21 10:23 编辑 [/i]] 怪异模式....现在似乎都加文档类型定义的吧
width和height在正常模式下都仅仅是指内容的宽度 高度(IE5.5下不是) 你看的书上和论坛上说的是错的
正确的应该是
IE6 IE7 在怪异模式下 盒模型是一模一样的 即width=width
IE6 IE7 在标准模式下 盒模型也是一模一样的 即width=width+padding+border 怪异模式不知道是什么
页:
[1]