在 safari 和 chrome 中边界与空的 thead 重叠和 border-collapse

border overlapping with empty thead and border-collapse in safari and chrome

在 chrome 和 safari 浏览器中,当存在空的 thead 和 border-collapse: collapse; 时,td 的边框会与前一个元素重叠;

<div>Hello</div>
<table style="border-collapse: collapse;">
<thead></thead>
<tbody>
  <tr>
    <td style="border-top: 25px solid black">World</td>
  </tr>
</tbody>
</table>

在 chrome 或 safari 中,文本 "Hello" 显示在 table 之前的 div 中,由于 td 的重叠边框而无法读取。但是在firefox中显示的很好

在 Safari 中,Chrome 在以下情况下边框不会与文本重叠:

<div>Hello</div>
<table>
<thead></thead>
<tbody>
  <tr>
    <td style="border-top: 15px solid black">World</td>
  </tr>
</tbody>
</table>


<div>Hello</div>
<table style="border-collapse: collapse;">
<tbody>
  <tr>
    <td style="border-top: 15px solid black">World</td>
  </tr>
</tbody>
</table>

<div>Hello</div>
<table style="border-collapse: collapse;">
<thead>
  <tr>
    <th>Header</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td style="border-top: 15px solid black">World</td>
  </tr>
</tbody>
</table>

在 chrome 或 safari 中似乎有误,或者有人知道不同行为是否有原因吗?

这看起来确实像是 Chrome 显示引擎中的一个缺陷,是的。
但是,有一个简单的解决方法:只需将 thead:empty {display:none} 添加到样式表即可。

thead:empty {display:none}
<div>Hello</div>
<table style="border-collapse: collapse;">
<thead></thead>
<tbody>
  <tr>
    <td style="border-top: 15px solid black">World</td>
  </tr>
</tbody>
</table>

<div>Hello</div>
<table>
<thead></thead>
<tbody>
  <tr>
    <td style="border-top: 15px solid black">World</td>
  </tr>
</tbody>
</table>


<div>Hello</div>
<table style="border-collapse: collapse;">
<tbody>
  <tr>
    <td style="border-top: 15px solid black">World</td>
  </tr>
</tbody>
</table>

<div>Hello</div>
<table style="border-collapse: collapse;">
<thead>
  <tr>
    <th>Header</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td style="border-top: 15px solid black">World</td>
  </tr>
</tbody>
</table>