境界が空のtheadと重なっていて、safariとchromeの境界が崩壊する

Question

chromeとsafariのブラウザでは、空のtheadがあり、border-collapse：collapseのときにtdの境界が前の要素と重なっています。 Chromeで

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

またはテーブルの前のdivに表示されるテキストを「こんにちは」、Safariは、理由tdからオーバーラップボーダーの読みではありません。しかし、それはFirefoxでうまく表示されます。

サファリクロム境界は、次の場合のテキスト重複されないで

：番目のあるボーダー崩壊

ない空THEAD

せず

• をtheadad

<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>

クロムやサファリに間違っているように見えるか、異なる行動の理由がある場合、誰もが知っているのでしょうか？

Answer 1

これは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>