Chrome中的奇怪CSS边框问题 [英] Strange CSS Border Issue in Chrome

问题描述

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

I have written an application from which you can write checks and I have the following markup on one of the pages to view and edit some of the fields of the check.

#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标签下也有一个底部边框。

It is supposed to have a bottom border on the tds that displays who the check was written to and the amount but not on the labels for those cells. It actually sees to appear correctly in IE and FireFox but in Chrome, I get a bottom border under the Amount label as well.

运行IE 9，FireFox 6.0.2， and Chrome 16.0.912.63

Running IE 9, FireFox 6.0.2, and Chrome 16.0.912.63

其他人看过这个问题？

推荐答案

添加 table {border-collapse：separate} 似乎修复它，但我不知道为什么。如果我想出更多，我会更新答案。

Adding table{border-collapse:separate} seems to fix it but I don't know why. I'll update the answer if I figure out more.

这篇关于Chrome中的奇怪CSS边框问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！