div和table中父子元素的高度

<div style="width:500px;height:200px;border:1px solid red;">
   <div style="width:500px;height:200px;border:1px solid gold;">
   </div>
</div>
此时外层div的实际高度为202px,宽度为502px,内层为(200,500)

<div style="width:500px;height:200px;border:1px solid red;">
   <div style="width:100%;height:100%;border:1px solid gold;">
   </div>
</div>
此时外层div:(200,500)  内层div:(198,498)

<table cellspacing="0" cellpadding="0" style="width:500px;height:200px;table-layout:fixed;border:1px solid red;">
<tr>
<td style="width:77px;height:100%;border:1px black solid;">&nbsp;</td>
<td style="height:100%;border:1px black gold;">&nbsp;</td>
<td style="width:20px;height:100%;border:1px green solid;">&nbsp;</td>
</tr>

</table>
在ie7下，只显示table的红边框，高度为200px，而td的上下边框被table覆盖，在firefox里相反，只显示td的边框。如果将table的border的边框设为0，则td的高度仍然为200px