职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 834|回复: 6

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

[复制链接]
紫衿 发表于 2011-6-14 13:52 | 显示全部楼层 |阅读模式
Bug重现

Html代码  
<!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>  

<!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/de ... -sheet-defaults.htm

再次,form的margin会发生塌陷,跑到父元素的外了,因此两个div之间断裂出现空白了。

关于margin塌陷见css 8.3.1:http://www.w3.org/TR/CSS2/box.html#collapsing-margins


因此,写css reset时莫忘了重置form元素。

感谢他们两个。




叫我小乖 发表于 2011-6-14 13:52 | 显示全部楼层
恩,form本来边距就不是0,最近刚做web发现的

会玩就好 发表于 2011-6-14 13:52 | 显示全部楼层
so at the begining put a *{margin:0;padding:0;}


broken 发表于 2011-8-1 10:39 | 显示全部楼层
晕倒.......
天上智喜 发表于 2011-8-3 12:06 | 显示全部楼层
搞笑..哈哈.
木已 发表于 2011-8-4 11:55 | 显示全部楼层
给我点愤怒.
叫我小乖 发表于 2011-8-11 14:29 | 显示全部楼层
早上的时候把硬盘线重新弄 了下
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-28 23:52 , Processed in 0.124775 second(s), 24 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表