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

【问题标题】：Very thin white border between cell of a table only on iPad仅在 iPad 上的表格单元格之间的白色边框非常细
【发布时间】：2013-02-26 13:38:53
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

您是否尝试添加border-collapse: collapse？
将<meta content='width=device-width; initial-scale=1.0;' name='viewport' /> 放入<head>。
您好，是否有计算会导致非四舍五入的数字（如 12.5px）？另外，您是否尝试过重置边框颜色不透明度？
对不起，我真的很努力，找不到如何删除那些边框。你还有什么发现吗？
stackoverflow.com/questions/3890141/…

标签： html css ipad html-table border-layout

【解决方案1】：

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

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

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

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

【讨论】：

table { ...border-collapse: 分开；边框间距：2px； ...}，请尝试关注边框间距。
@MilchePatern 我已经尝试覆盖所有默认属性，但没有运气：我设置了border-collapse:collapse; 和border-spacing:0px;，没有任何更改...
您是否覆盖了“不透明度”？
@MilchePatern opacity 会影响整个元素，而不仅仅是边框；我尝试border-color: rgba(0,0,0,0); 使边框透明，但没有成功。
嘿，rgba(0,0,0,0) 表示黑色透明.. 尝试将 rgba(0,0,0,1) 用于 BORDER-COLOR，而不是框。另外：背景剪辑：填充框；可以修复一些 IE9 行为。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：