如果表格有 TD 背景图像，Chrome 会显示细线答案

【问题标题】：Chrome shows thin line if table has TD background image如果表格有 TD 背景图像，Chrome 会显示细线
【发布时间】：2018-09-18 22:15:05
【问题描述】：

我有带有背景图像的单元格 (td) 的表格，在移动设备和桌面 chrome 上，如果表格的绝对位置未与圆形像素对齐，它会在 TD 之间显示细线。

// in case you don't see the glitch at 0.5px
var f = 0;
window.onclick = function() {
  f += 0.3;
  document.body.style.paddingLeft = f + 'px';
  document.body.style.paddingTop = f + 'px';
};

body {
  background-color: white;
  padding-left: 0.5px;
  padding-top: 0.5px;
}

table {
  border: 0;
  border-collapse: collapse;
}

table.image td {
  background-image: url(https://ghost.sk/chrome-error/purple.png);
  height: 40px;
  width: 40px;
}

table.solid td {
  background-color: purple;
  height: 40px;
  width: 40px;
}

div.image {
  background-image: url(https://ghost.sk/chrome-error/purple.png);
  height: 40px;
  width: 40px;
  display: inline-block;
}

Table with image bg (glitch both desktop and mobile):

<table class="image">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Table with solid bg (glitch usually only mobile):

<table class="image">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

On mobile it glitches for divs too (more likely with images than solid colors):

<div>
  <div class="image">a</div><div class="image">b</div>
</div>
<div>
  <div class="image">c</div><div class="image">d</div>
</div>

注意事项：

在演示中我使用 0.5px 初始填充，但在实际代码中我不是故意将其设置为分数，它可以随时发生，例如当居中表格或使用 padding-left 1em 时，这取决于字体。
在演示中，我使用填充纯色的图像来更好地显示它（如果是纯色，我不会使用图像，而且在移动设备上使用纯色时也会显示相同的故障）。
当“clamp to edge”未设置时，“感觉”就像 OpenGL 的错误。
我没有在我的原始设计中使用表格，只是使用表格更容易触发它。
下面是截图：https://ghost.sk/chrome-error/screenshot.png
测试平台：Mozilla/5.0（X11；Linux x86_64）AppleWebKit/537.36（KHTML，如 Gecko）Ubuntu Chromium/69.0.3497.81 Chrome/69.0.3497.81 Safari/537.36

【问题讨论】：

我无法确认这一点。在我的 1440p/117ppi 显示器上运行良好。
这个问题还没有解决。

标签： html css google-chrome

【解决方案1】：

我遇到了同样的问题，请看这个 Youtube 视频：https://youtu.be/y88k6khLGvs。在我的情况下，只有当滚动条显示在正文上时才会出现细灰线。

但是，找到了一个适合我的解决方案。由于 Chrome 似乎在每个背景图像的末尾占用 1 px，我从这里更改了我的背景 CSS：

td
{
    background-repeat: repeat-x;
}

到

td
{
    background-size: 110% 100%;
    background-repeat: no-repeat;
}

它只是告诉 Chrome 超出 TD 的最后一个像素并正确渲染它。

【讨论】：

【解决方案2】：

这个问题被指出here。 Chrome 会导致背景图像在每个单元格中重新启动，而不是在整个行中很好地不间断地流动。我希望这将在下一个版本的 chrome 中得到修复。

【讨论】：

【解决方案3】：

我被这个错误困扰了一段时间，终于找到了一个简单的解决方案。只需在td 上添加background-repeat: no-repeat。 background-repeat: no-repeat on tr 如果背景是 tr

【讨论】：