|
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 则不会断开，如图
首先，IE6/7下form的默认样式中margin不为0， 分别为1.12em 0，14.25pt 0。 再次，form的margin会发生塌陷，跑到父元素的外了，因此两个div之间断裂出现空白了。 因此，写css reset时莫忘了重置form元素。
(责任编辑：admin) |
