Question

当您将border-collapse: collapse;应用于表格以将其单元格的边界“融合”时，它会在确定Javascript中表格单元格的宽度时出现问题。例如，请看这个页面：
http://game-point.net/misc/browserTests/scratchpads/jsTableWidth/
有两个表，一个带有折叠边框，另一个没有。如果你单击没有折叠边框的行中的一行，jQuery的innerWidth和outerWidth函数会报告我期望看到的内容（内容宽度，内容加上边框宽度;没有填充）。

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

我想获得实际内容的宽度。我似乎无法使用width()，因为只有Firefox可以通过折叠边框获得正确的结果。我不能使用outerWidth()，因为它包括边框（或者可能只是一个边框，因为它只比实际内容宽度大1px）。我不能使用clientWidth，因为它的值在浏览器之间是不一致的。在折叠边框时，我应该怎么做以及为什么width() 1px在大多数浏览器中都太短了？

Answer 1

在折叠边框模型中，单元格不仅仅是“融合”，而是由相邻单元格共享。

所以说你有这样的标记：

<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的边框在桌子外面。请参阅http://www.w3.org/TR/CSS21/tables.html#collapsing-borders

上的图片

因此，对于第一个细胞的各种宽度，UA应该返回什么？它应该是100px吗？ 101px？ 102px？别的什么？简单地返回内容宽度加上边框宽度将返回102px，但单元格占用的实际空间仅为101px ......

此外，如果jQuery正在计算内容宽度本身，它也会遇到这个问题，如果它不是特殊情况下边框折叠的单元格。

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

至于你应该做什么，如果你真的确切地知道你的边界发生了什么，你应该可以得到BroadingClientRect（）。width（假设浏览器没有弄乱那个）并减去边界的半宽。如果您需要使用各种不同的边框宽度，我不确定是否有一个很好的解决方案。

Answer 2

我认为每个浏览器中的问题，但Opera实际上是jQuery使用其width()函数执行的操作;它有宽度和高度的自定义钩子，它不总是返回真正的计算宽度。当我使用window.getComputedStyle来获取这些表格单元格的宽度时，它确实给了我正确的渲染宽度。我将报告Opera的window.getComputedStyle输出作为错误，因为即使绕过jQuery，它似乎也没有给你正确的渲染宽度。

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

2 个答案: