做邮箱首页时碰到的，如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>IE6/7下form元素默认样式导致的bug</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 and IE8/9(怪异模式)下以上两个div会断开，大概有10-20个px，如图
IE8/9(标准模式) and Firefox/Safari/Chrome/Opera 则不会断开，如图
去掉form或将form换成div则不会，初以为是form在IE6/7下的莫名bug，经路神指点明白了。
首先，IE6/7下form的默认样式中margin不为0， 分别为1.12em 0，14.25pt 0。
再次，form的margin会发生塌陷，跑到父元素的外了，因此两个div之间断裂出现空白了。
因此，写css reset时莫忘了重置form元素。
相关：
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
