IE6/7下form元素默认样式导致的bug

by

at 2010-09-06 14:30:42

original http://www.javaeye.com/topic/756601

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元素。

感谢他们两个。

      <br><br>
      作者: <a href="http://snandy.javaeye.com">zhouyrt</a> 
      <br>
      声明: 本文系JavaEye网站发布的原创文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！
      <br><br>
      <span style="color:red">
        <a href="http://www.javaeye.com/topic/756601" style="color:red">已有 <strong>0</strong> 人发表回复，猛击-&gt;&gt;<strong>这里</strong>&lt;&lt;-参与讨论</a>
      </span>
      <br><br><br>

JavaEye推荐

Google Reader

IE6/7下form元素默认样式导致的bug

IE6/7下form元素默认样式导致的bug

by

at 2010-09-06 14:30:42

original http://www.javaeye.com/topic/756601