Chrome中奇怪的CSS边框问题

时间:2011-12-27 17:04:48

标签: css google-chrome html-table border

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

#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

其他人都看到了这个问题吗?

1 个答案:

答案 0 :(得分:5)

添加table{border-collapse:separate}似乎解决了这个问题,但我不知道为什么。如果我知道更多,我会更新答案。