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居中定位并使用四舍五入的像素值来进行临时修复。

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