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

Question

下面是问题的代码片段(使用Chrome，并在页面加载后按Run；我不需要在任何其他页面上这样做)。你会看到第一个盒子是齐整的，但第二个盒子有一个缺口。唯一的区别是第二个框在有自动边距的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

找出了发生的原因。它与小数像素有关。如果使用百分比或页边距: auto，则会出现这种情况。在这两种场景中，表的位置都在X.Ypx，现在在表格单元格中的背景图像右侧绘制时引入了空白。对于Chrome来说，这是一个非常愚蠢和烦人的bug；我希望他们能修复它。我不得不通过使用javascript进行中心定位，并设置一个圆角像素值来临时修复。

注意:上面的代码片段只显示了引入小数像素时的问题，因此它通常取决于屏幕的大小。当它包含在一个iframe中时，您可以通过在这个页面上查找类‘代码片段-结果-代码’来显示我正在讨论的问题，并给它102%的宽度。

Answer 2

您可以添加更多css：

table {
   display: inline-block;
}

​

​