css - Chrome 中奇怪的 CSS 边框问题

Question

我编写了一个应用程序，您可以从中编写支票，并且我在其中一个页面上有以下标记以查看和编辑支票的某些字段。

#CheckInformation {
  border: 1px solid #aaa;
  padding: 10px;
  background-color: #E2F0F9;
  margin-top: 15px;
}
#CheckInformation #PropertyAddress {
  font-size: .87em;
  width: 200px;
  float: left;
  text-align: center;
}
#CheckInformation .label-column {
  width: 100px;
}
#CheckInformation .payto-col {
  width: 570px;
}
#CheckInformation .line {
  border-bottom: 1px solid #aaa;
}
#CheckInformation #PayTo {
  width: 540px;
}
#CheckInformation #Address {
  width: 200px;
  height: 45px;
}
#CheckInformation #Memo {
  width: 400px;
}
#CheckInformation #NumberWords {
  margin: 3px;
  font-style: italic;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" />
<div id="CheckInformation">
  <table>
    <tr>
      <td class="top" colspan="2" rowspan="2">
        <div id="PropertyAddress">
          1234 Main St
          <br />Some city, State 50000
        </div>
      </td>
      <td class="text-right label-column">Date</td>
      <td>
        <input type="text"></input>
      </td>
    </tr>
    <tr>
      <td class="text-right">Check Number</td>
      <td>
        <input type="text"></input>
      </td>
    </tr>
    <tr>
      <td>Pay to</td>
      <td class="payto-col line">
        Some person
      </td>
      <td class="text-right">Amount</td>
      <td class="text-right line">
        70.00
      </td>
    </tr>
    <tr>
      <td></td>
      <td class="line" colspan="3">
        <div id="NumberWords">Zero Dollars & Zero Cents</div>
      </td>
    </tr>
    <tr>
      <td class="top">Address</td>
      <td colspan="3">
        <div id="Address">
          1234 Main St
          <br />Some city, State 50000
        </div>
      </td>
    </tr>
    <tr>
      <td>Memo</td>
      <td colspan="3">
        <input type="text"></input>
      </td>
    </tr>
  </table>
</div>

它应该在 tds 上有一个底部边框，显示支票的收件人和金额，但不显示在这些单元格的标签上。它实际上在 IE 和 FireFox 中显示正确，但在 Chrome 中，我在 Amount 标签下也有一个底部边框。

运行 IE 9、FireFox 6.0.2 和 Chrome 16.0.912.63

还有其他人看到这个问题吗？

Answer 1

添加 table{border-collapse:separate} 似乎可以解决问题，但我不知道为什么。如果我想出更多，我会更新答案。