有没有办法用纯 CSS 解决 Safari 的 colspan 边框渲染错误？

问题描述 投票：0回答：0

如果我有一个带有折叠边框的表格，以及一个带有 

colspan
且没有边框的表格单元格，并且它跨越有边框和无边框的相邻单元格，Safari 将在不应该有边框的地方显示边框。我可以通过添加额外的表格单元格来解决此问题，以防止
colspan
从相邻单元格带有边框延伸到另一个单元格没有边框。我宁愿用纯 CSS 解决这个问题，而不是弄乱我的 HTML。关于我该怎么做的任何想法？

这是一些示例代码：

<!DOCTYPE html>
<html>
<head>
<title>Safari colspan border bug example</title>
<style>
body {
    background: white;
    color: black;
}
table {
    border: none;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
td.empty {
    border: none;
}
</style>
</head>
<body>

<table><tr>
    <td class="empty" colspan="2">Should be borderless, but has a bottom border</td>
</tr><tr>
    <td>Bordered</td>
    <td class="empty">Borderless</td>
</tr></table>

</body>
</html>

这里有一个相关的问题：Border-collapse and colspanStrange behavior

这是 WebKit 错误：错误 20840 - 当表格包含具有不同 colspans 的单元格时，折叠边框分辨率错误

这是我第一次注意到这个错误的项目：Chemistry Explorer

我尝试了几种纯 CSS 解决方案。我可以通过将错误的边框设置为与背景相同的颜色来使其不可见，如下所示：

td.empty {
    border: 1px solid white;
}

但是，这也会使边框在相邻的带边框单元格上不可见。

我还尝试了几种设置 

border-bottom
和 
border-top
属性的变体，但这些都没有效果。我尝试了一堆实验，比如 
overflow
属性，但没有成功。

最终我只能通过创建额外的表格单元格来解决这个问题，这样 colspan 就不会与有边框和无边框的单元格相邻。

此错误出现在 Safari 16.3.1 和 16.4、iOS、iPadOS 和 macOS 上。该错误不会出现在 Chrome 111.x 或 112.x.

css html-table safari border border-collapse
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.