Windows表格中的Chrome列宽不是浏览器版本之间的定义或一致

Question

我在表格列宽上有问题。它只发生在windows surface chrome上。 （此时v55最新版本）

运行下面的代码（缩放100％）：

• Windows表面镶边：t2的列宽为27.33像素

• 其他浏览器：对于t2

，列的宽度为27px

我该怎样防止这种情况？这是一个浏览器错误吗？

* {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  text-align: center;
}

.t1 td {
  width: 108px;
}

.t2 td {
  width: 27px;
}

td {
  white-space: nowrap;
  border: 2px solid red;
}

<table class='t1'>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<table class='t2'>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

Answer 1

经过一段时间的调查，它似乎是一个特定于铬的bug。

https://bugs.chromium.org/p/chromium/issues/detail?id=377847

无法找到任何黑客/解决方案来使其发挥作用。对于我的具体用例，为了解决这个问题，我决定不使用表格。