14

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

但是，如果您单击表格中具有折叠边框的行，则会出现与浏览器不一致的行为，尤其是在clientWidth属性上。在 FirefoxclientWidth中，与width(). 在 IE 和 Chrome 中高 1 个像素，在 Opera 中与 相同width()，但 Operawidth()太小了。事实上，在width()我测试过的所有浏览器中，除了 Firefox 之外，它都太小了一个像素。所以如果你截屏并且内容实际上是 80px，width()就是 79px（jQuery 从计算的 CSS 值中得到它）。为什么是这样？

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

4

2 回答 2

8

在折叠边界模型中，单元格不仅仅是“融合”的，它们还被相邻的单元格共享。

所以说你有这样的标记：

<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吗？101像素？102 像素？还有什么？简单地返回内容宽度加上边框宽度将返回 102px，但单元格实际占用的空间只有 101px...

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

当然，对于 clientWidth 并没有真正的规范，更不用说 jQuery 的 width() 等了。这可以解释为什么你看到的结果到处都是。

至于你应该做什么，如果你真的知道你的边框到底发生了什么，你可能应该 getBoundingClientRect().width （假设浏览器不会搞砸）并减去边框的半宽度。如果您需要它来处理各种不同的边框宽度，我不确定是否有很好的解决方案。

于 2012-11-08T07:54:13.517 回答
5

I think the problem in every browser but Opera is actually something jQuery is doing with its width() function; it has custom hooks for width and height and it doesn't always return the true computed width. When I use window.getComputedStyle to get the widths of these table cells, it does indeed give me the proper rendered width. I am going to report Opera's window.getComputedStyle output as a bug, because it doesn't seem to give you the proper rendered width even when you bypass jQuery.

于 2012-11-09T08:27:03.660 回答