html - 仅在 iPad 上的表格单元格之间有非常细的白色边框

Question

这只发生在 iPad Retina 和非 Retina iOS 5 和 6 上。

即使我尝试在表格上设置无边框，也会出现细细的白色边框。

您可以在 http://codepen.io/anon/pen/Kcexq 查看问题示例。

查看pb需要iPad或模拟器。

仔细看绿色标签有一个白色边框:

郑重声明，同样的事情发生在显示为表格单元格时。

Answer 1

出现的细边框似乎是由 display:table-row 和/或 display:table-cell 属性引起的。

注意:它实际上不是白色边框，它是一种 rgba:(0,0,0,alpha) ；如果更改表格后面的背景颜色，您会看到这一点。

通过将td样式更改为display:inline-block;，或将tr样式更改为display:block;，它摆脱了单元格的左右边框，但底部边框仍然存在。

事实上，用 rgba(0,0,0,0); 覆盖 border-color 任何东西(table, tr, td...) '改变任何东西，border-collapse:collapse; 也没有(正如 Morpheus 所建议的)。计算样式没有显示任何计算的边框，但它仍然在这里......

注意:iOS 似乎也会根据用户的缩放比例计算边框(在真实 iPad 上测试过)。

这是 Safari iOS 的默认表格样式:

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

td, th {
    display: table-cell;
    vertical-align: inherit;
}

我仍在寻找可以添加该 alpha 边框的隐藏 CSS，如果我找到任何东西，我会更新我的答案。