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

Question

我正在开发一项功能，该功能要求我在单击按钮时将CSS宽度设置为表中每个td的像素。我使用getBoundingClientRect来计算td宽度并获得px(例如100px(，然后将其设置为td.style.width。但是，如果已经设置了table.style.wwidth，则会导致一些单元格发生偏移，但如果没有设置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来复制。我想要的是在给每个td分配px后不要移动单元格。谢谢！

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

Answer 1

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

td { box-sizing: border-box;}

点击小提琴上的按钮不会改变桌子的宽度。

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