【问题标题】: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)?另外,您是否尝试过重置边框颜色不透明度?
  • 对不起,我真的很努力,找不到如何删除那些边框。你还有什么发现吗?

标签: 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;
       }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-04-19
      • 1970-01-01
      • 1970-01-01
      • 2014-01-17
      • 1970-01-01
      • 2016-02-11
      相关资源
      最近更新 更多