边界与空头重叠，野生动物和铬的边界塌陷
边界与空头重叠，野生动物和铬的边界塌陷
提问于 2017-01-27 13:52:37
在chrome和safari浏览器中，当存在空头和边界崩溃时，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中，显示在表前面的div中的文本"Hello“由于td的重叠边框而不可读。但它在firefox中显示得很好。
在Safari an 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>
似乎是错误的铬或野生动物，或谁知道是否有一个原因有不同的行为？
Stack Overflow用户
回答已采纳
发布于 2017-01-27 14:27:51
这看起来确实像是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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41895566
复制相关文章
相似问题
腾讯云开发者
