Chrome 中奇怪的 CSS 边框问题

Posted 2023-03-06

【中文标题】Chrome 中奇怪的 CSS 边框问题

【英文标题】：Strange CSS Border Issue in Chrome

【发布时间】：2012-01-28 15:38:53

【问题描述】：

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

#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

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

【问题讨论】：

是的，这是一个奇怪的问题。似乎 Chrome 只是为第一个 td 之后的所有 td 显示边框，并带有边框。正在尝试调试。

【参考方案1】：

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

【讨论】：

顺便说一下，border-collapse:collapse 的属性来自于 normalize.css。所以你也可以把它关掉。