getBoundingClientRect 在计算 td 宽度时似乎不准确

Question

我正在开发一项功能，该功能要求我在单击按钮时将 CSS 宽度设置为表格的每个 td 的像素。我使用 getBoundingClientRect 计算 td 宽度并获取 px（例如 100px），然后将其设置为 td.style.width。但是，如果 table.style.width 已经设置，它会导致一些单元格移动，但是如果 table.style.width 没有设置，则不会有移动。请参阅下面的表格 HTML。

<table id='mytable' style="border-collapse:collapse;width:300px">
  <tbody>
    <tr height="19" style="height:14.25pt">

      <td style="border:1px solid rgb(212, 212, 212);height:14.25pt;width:100px"></td>
      <td style="border:1px solid rgb(212, 212, 212);width:100px"></td>
      <td style="border:1px solid rgb(212, 212, 212);width:100px"></td>
    </tr>
  </tbody>
</table>

奇怪的是，我可以看到每个 td 的宽度是：100、100、100，但是在应用从getBoundingClientRect().right - getBoundingClientRect().left 计算的新宽度后，它变成：98.5、100.5、101。这种不一致导致了移位效果.

我发现如果width:300px 不存在于表格的 CSS 中，它会在不移动的情况下完美运行，但如果它已经存在，我不能只删除它，因为删除它也会导致移动。所以我想知道是否有办法在不删除 table.style.width 的情况下做到这一点。

我创建了 jsfiddle 来重现。我想要的是在将 px 分配给每个 td 后不要移动单元格。谢谢！

https://jsfiddle.net/flyingbee2012/udpeq0w9/56/

Answer 1

如果您在 CSS 中默认 td 元素的 box-sizing 样式属性为 border-box：

td { box-sizing: border-box;}

单击小提琴中的按钮不会改变表格的宽度。

基本上，表格元素默认设置为content-box 大小。在按钮单击中将默认值更改为 border-box 意味着浏览器必须使用不同的大小规则再次布局表格。