Chrome 现在为表格单元格的背景图像添加了右边距答案

【问题标题】：Chrome now adds a right-margin to background-images of a table-cellChrome 现在为表格单元格的背景图像添加了右边距
【发布时间】：2018-10-31 03:15:19
【问题描述】：

这是问题的代码 sn-p（使用 Chrome，并在页面加载后按运行；当它在任何其他页面上时，我不需要这样做）。您会看到第一个框彼此齐平，但第二个框有一个间隙。唯一的区别是第二个框位于具有自动边距的 div 内。

同样的代码多年来一直为我工作，但在过去几个月的 Chrome 更新中，它突然添加了背景图像无法填充的透明边框。但是背景颜色可以填充它！

  td:first-child {
      background:red url(https://d11wkw82a69pyn.cloudfront.net/siteassets/images/test-automation/canvas/1440x950_canvas_test_automation.jpg);width:20px;
    }
    td:last-child {
      width:20px;background:blue
    }
    tr {
      height:20px;
    }

   <table cellspacing="0" cellpadding="0">
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>
    
    <div style="width:500px;margin:0 auto">
      <table cellspacing="0" cellpadding="0">
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>

【问题讨论】：

我很难看出这不是预期的行为。第二组框没有边距，您已将表格的宽度设置为 500px，因此它比上面的表格更窄，如果您删除它但保持自动边距，它与上面相同，因此 The only difference is the second boxes are within a div that has an auto margin 很简单错了。
我在一个单独的 jsfiddle 页面中看到了上面的代码 sn-p，没有看到它没有显示在那里。只有在引入小数像素时才会出现问题，这取决于屏幕的大小。由于它包含在 iframe 中，因此您可以通过在此页面上查找类 'sn-p-result-code' 并为其设置 102% 的宽度来显示我正在谈论的问题。不过，在 Chrome 解决这个问题之前，我已经找到了一个临时修复程序。感谢您的帮助

标签： html css google-chrome

【解决方案1】：

你可以添加更多的css：

table {
   display: inline-block;
}

【讨论】：

我会选择display: inline-block而不是float: left

【解决方案2】：

找出它发生的原因。它与分数像素有关。如果使用百分比或边距：自动，则会发生这些情况。在这两种情况下，表格的位置都在 X.Ypx，现在在表格单元格中的背景图像右侧引入了绘制间隙。 Chrome 引入的一个非常愚蠢和烦人的错误；我希望他们修复它。我不得不通过使用 javascript 的中心定位来进行临时修复，并使用四舍五入的像素值。

注意：上面的代码 sn-p 仅在引入小数像素时显示问题，因此通常取决于屏幕的大小。由于它包含在 iframe 中，因此您可以通过在此页面上查找类 'sn-p-result-code' 并为其设置 102% 的宽度来显示我正在谈论的问题。

【讨论】：