仅在iPad上的桌子的单元格之间非常薄的白色边框

Question

这仅发生在iPad视网膜和非视网膜iOS 5和6上.

即使我试图在桌子上没有边框,也会出现一个薄的白色边框.

你可以看到问题的一个例子http://codepen.io/anon/pen/Kcexq.

需要iPad或模拟器来查看pb.

仔细查看绿色选项卡是否有白色边框:

对于记录,同样的事情发生在display-table-cell上.

Answer 1

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

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

通过将tdstyle 更改为display:inline-block;，或tr将 style 更改为display:block;，它消除了单元格的左右边框，但底部边框仍然存在。

事实上，border-color用 a覆盖rgba(0,0,0,0);任何东西（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，如果我发现任何内容，我会更新我的答案。