为什么表格单元格的Javascript宽度短了一个像素？

应用

边框折叠时：折叠


有两个表，一个有折叠边框，另一个没有折叠边框。如果在没有折叠边框的行上单击，jQuery的innerWidth和outerWidth函数会报告我希望看到的内容（分别是内容宽度和内容加边框宽度；没有填充）

但是，如果单击表中边框折叠的行，则会出现浏览器不一致的行为，尤其是在
clientWidth
属性上。在Firefox中，
clientWidth
与
width（）
相同。在IE和Chrome中，它高出1像素，在Opera中，它与
width（）
相同，但Opera的
width（）
太小。事实上，除了Firefox之外，在我测试过的所有浏览器中，
width（）。因此，如果您拍摄一个屏幕截图，内容实际上是80px，
width（）
是79px（jQuery从计算出的CSS值中获取）。为什么会这样

我想知道实际内容的宽度。我似乎不能使用
width（）。我不能使用
outerWidth（）
，因为它包括边框（或者可能只有一个边框，因为它只比实际内容宽度大1倍）。我不能使用
clientWidth
，因为它的值在浏览器之间不一致。在大多数浏览器中，当边框折叠时，
width（）

假设您有这样的标记：

<table style="border-collapse: collapse">
  <tr>
    <td style="border: 1px solid black; width: 100px">
    <td style="border: 1px solid black; width: 100px">
  </tr>
</table>



在折叠边框模型中，此表格的宽度为102px。表外有0.5px边框，然后是0.5px边框，然后是100px单元格，然后是1px边框，然后是100px单元格，然后是0.5px边框，然后是表外的0.5px边框。请看下面的图片

因此，对于第一个单元的不同宽度，UA应该返回什么？应该是100像素吗？101px？102px？还有别的吗？简单地返回内容宽度加上边框宽度将返回102px，但单元格实际占用的空间仅为101px

此外，如果jQuery计算内容宽度本身，它也可能遇到这个问题，如果它不以某种方式处理特殊情况的边界折叠单元格

当然，clientWidth没有真正的规范，更不用说jQuery的width（）之类的了。这就解释了为什么你看到的结果到处都是

至于你应该做什么，如果你真的知道你的边框到底是怎么回事，你可能应该得到boundingclientrect（）.width（假设浏览器没有弄糟），然后减去边框的一半宽度。如果您需要使用不同的边框宽度，我不确定是否有很好的解决方案。
我认为每个浏览器都存在问题，但Opera实际上是jQuery使用其
width（）
函数所做的事情；它有宽度和高度的自定义挂钩，并且它并不总是返回真实的计算宽度。当我使用
window.getComputedStyle
获取这些表格单元格的宽度时，它确实为我提供了正确的渲染宽度。我将把Opera的
窗口.getComputedStyle
输出报告为一个bug，因为即使您绕过jQuery，它似乎也无法为您提供正确的渲染宽度。
使用
.wrapInner（）
方法将单元格内容用div包装，并获取其宽度。但这意味着您需要到处插入DOM元素来包装内容。。。不太理想？表格可能会让人头疼，为什么你认为它们不再用于布局？包装内容也是为其中的行设置动画的解决方案。尝试在没有行的情况下设置行的动画…结果是terrible@charlietfl“设置行动画”是什么意思？如…尝试使用slideUp或slideDown动画切换动画的可见性您指定的表格宽度为203px（我刚刚尝试过），额外的3px来自表格左侧和右侧的1px边框，两个单元格之间还有一个1px的边界。我不太明白你的解释。渲染的宽度是203px。布局宽度为202px。边框实际上从桌子上伸出来。请看我提供的链接上的图片。。。