Chrome现在为表格单元格的背景图像添加了一个空白边距

Question

这是此问题的代码段（使用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>
    

Answer 1

您可以添加更多CSS：

table {
   display: inline-block;
}

Answer 2

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

NB：上面的代码段仅在引入小数像素时显示此问题，因此通常取决于屏幕的大小。由于它已包含在iframe中，因此可以通过在此页面上查找类“片段结果代码”并将其宽度设置为102％来显示我正在谈论的问题。