html - 高度显示不正确

Question

最近一段时间我一直在为一个非常愚蠢的问题而苦恼。为什么我不能让分隔两个框的单元格以 9px 正确显示？我已经计算了几次，结果很成功，但是在带有箭头指向它的单元格中，它增加了额外的高度:

我实际上似乎是为它设置的 9 像素高度加倍(大约 18 像素)。为什么？？这是没有意义的。

<!-- BIG WRAPPER TABLE FOR CENTRAL CONTENT -->
<table width="700px" border="0" cellspacing="0" cellpadding="0" class="homepage">
  <tr align="center">
    <td>

      <table width="681" height="451" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
          <td rowspan="3" bgcolor="#FF66CC">Image will go here</td>
          <td rowspan="3" width="9">&nbsp;</td>
          <td height="221" width="221" bgcolor="#3f7583">Text will go here</td>
        </tr>
        <tr height="9">
          <td height="9" width="221" bgcolor="#FFFFFF">&nbsp;</td>
        </tr>
        <tr>
          <td height="221" width="221" bgcolor="#CC0000">Image will go here</td>
        </tr>
    </table>


    </td>
  </tr>
</table>
<!-- END BIG WRAPPER TABLE -->

Answer 1

这是因为你的td

 <td height="9" width="221" bgcolor="#FFFFFF">&nbsp;</td>

当以正常字体大小呈现时，它占用了   的高度，只需将其删除即可。

这是 working fiddle