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

Question

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

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

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

需要 iPad 或模拟器才能查看 pb。

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

对于记录，显示为表格单元格也会发生同样的事情。

Answer 1

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

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

通过将td样式更改为display:inline-block;，或tr样式更改为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，如果我发现任何内容，我会更新我的答案。

Answer 2

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

这里的讨论对这个https://www.campaignmonitor.com/blog/email-marketing/2011/10/iphone-fail-the-trouble-with-table-borders-and-html-email/非常有用

Answer 3

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

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