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

Question

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

即使我尝试在桌子上没有边框，也会出现一个细白边框。

您可以在http://codepen.io/anon/pen/Kcexq找到问题的示例。

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

仔细查看绿色标签是否有白色边框：

对于记录，同样的事情发生在display-table-cell。

Answer 1

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

注意：它实际上不是白色边框，它是一种rgba:(0,0,0,alpha);你可以看到，如果你改变桌子后面的背景颜色。

通过将td样式更改为display:inline-block;，或将tr样式更改为display:block;，可以删除左侧和{1}}样式。细胞的右边界，但底部边界仍然存在。

事实上，在任何事物（table，tr，td ......）上覆盖border-color rgba(0,0,0,0);并不会改变任何事情，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，如果我找到任何内容，我会更新我的答案。

Answer 2

这是因为背景。 你应该剪切1px宽度和固定高度的图像并将其作为背景。

td
   {
     background: url('your_url/green_bg.png') repeat-x;
   }

Answer 3

此问题与浏览器故意渲染具有干净1像素边框的表格单元格有关，并且行为最常见于背景颜色。解决方案是将有问题的区域包装/嵌套在自己的表中，并设置表格的背景颜色，而不是单元格的背景颜色。

此处的讨论对此https://www.campaignmonitor.com/blog/email-marketing/2011/10/iphone-fail-the-trouble-with-table-borders-and-html-email/

非常有用