IE与FF浏览器中 td的padding对height的影响

先看这样一段代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 *{padding:0px;margin:0px;}
 6 table {border-collapse: collapse;border-spacing: 0;}
 7 </style>
 8 </head>
 9 <body>
10 <div style="float:left;width:100px;height:200px;background-color:blue;padding:20px">我是div</div>
11 <table>
12 <tr><td style="width:100px;height:200px;background-color:red;padding:20px;">我是td</td></tr>
13 </table>
14 </body>
15 </html>

运行后在IE7/8/9中显示结果如下：

在FF中显示结果如下：

由此可以知道对于div不论是在IE还是在FF中它们的处理规则都是同样的，但对于td元素，在IE中td的高度会算上padding，而FF则不会计算

posted @ 2012-08-23 15:02  Macbeth  阅读(338)  评论(0)  编辑  收藏  举报