建站教学网,让你建站更便捷和轻松!
您当前的位置:首页 > 网页制作 > html/xhtml

分析IE6/7/8/9中form默认样式导致的小bug

来源:建站教学网  时间:2011-03-28 21:29:35


我们首先看下下面的代码

01 <!DOCTYPE HTML

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title>IE6/7下form元素默认样式导致的bug</title> 

06 </head> 

07 <body style="padding:0 400px;">        

08 <div style="height:20px;border:1px solid gray;"></div> 

09 <div style="border:1px solid #878787;border-top:0;"> 

10     <form> 

11         <input type="text" /> 

12     </form>        

13 </div>           

14 </body> 

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

责任编辑:风中的自由

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2009, JZREAD.COM, Inc. All Rights Reserved
皖ICP备09015033号