浏览 4437 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-09-06
最后修改：2010-09-14
Bug重现
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body style="padding:0 400px;">
<div style="height:20px;border:1px solid gray;"></div>
<div style="border:1px solid #878787;border-top:0;">
<form>
<input type="text" />
</form>
</div>
</body>
</html>
IE6/7下以上两个div会断开，大概有10-20个px，截图如下：
IE8/Firefox3.6/Safari4/Chrome7 dev/Opera10 则不会断开
去掉form或将form换成div则不会，初以为是form在IE6/7下的莫名bug，经路神，猪大肠等指点明白了。
首先，IE6/7下form的默认样式中margin不为0， 分别为1.12em 0，14.25pt 0。 见：http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm
再次，form的margin会发生塌陷，跑到父元素的外了，因此两个div之间断裂出现空白了。
关于margin塌陷见css 8.3.1：http://www.w3.org/TR/CSS2/box.html#collapsing-margins
因此，写css reset时莫忘了重置form元素。
感谢他们两个。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-09-16
恩，form本来边距就不是0，最近刚做web发现的
|
| 返回顶楼 | |
|
发表时间：2010-09-17
so at the begining put a *{margin:0;padding:0;}
|
| 返回顶楼 | |
|
发表时间：2011-09-04
askjsp 写道 so at the begining put a *{margin:0;padding:0;}
美女，我爱你 |
| 返回顶楼 | |
