jQuery的width()方法在除了FF4以外的所有浏览器中似乎都有问题。

Question

我正在努力准确获取<td>元素的宽度。在Firefox 4中结果是我所期望的，但在IE9 / Safari 5中，我得到的结果少了1像素。这让我疯狂。

更新： 我的最终目标是从ROWS表中获取单元格的宽度，并将其应用于HEADER表的单元格，以便每个表的单元格都能完美对齐。让这个适用于所有浏览器是我的问题。 这是一个简单的示例： http://jsfiddle.net/XwNEj/16/ 只在Firefox 4中有效。我非常感谢在所有现代浏览器上让它工作的任何帮助。

- user169867

---

你尝试过从那里移除边框合并吗？ - c-smile

@user 这个问题与单元格边框有关。如果单元格没有边框，则 width() 返回 200。请参见此处：http://jsfiddle.net/XwNEj/12/ - Šime Vidas

我真的很想找到一种方法，使其无论是否存在边界都能正常工作。 - user169867

Answer 1

如需固定表头，请参见此帖子，或尝试这个使用纯CSS解决方案。

- Mike Neumegen

---

这将在此情况下给您“201px”的值。但是应该是202 = 200px + 1px + 1px（对于边框），对吗？ - c-smile

这对我的目的不起作用，因为我得到的宽度值将用于设置标题表格单元格的宽度。使用outerWidth会导致两者不对齐。 - user169867

请查看我的更新。它提供了一个更好的例子，说明我实际上正在尝试做什么。它们不在一个表格中的原因是因为我需要标题保持固定，而ROWS表格最终将在一个允许滚动的div中。然而，我省略了这些细节，以便专注于我试图解决的具体问题。 - user169867

看起来你遇到了一个常见的问题，即不同浏览器之间td宽度不同。 - Mike Neumegen

这是一个有趣的CSS示例，但在IE9中失败了，并且我相信一旦您需要在运行时查找宽度，它也会遇到相同的宽度问题。尽管JS示例使用了一些技巧，但它也存在相同的宽度问题。在IE9中，列没有对齐。 - user169867

Answer 2

我不会说这是错误的，更多的是表格单元格与div不具有相同的盒模型。您可以通过尝试以下操作来了解此问题：

• 使用.outerWidth()并与.width()进行比较
• 为th,td添加display:block;到您的CSS中，并将其与默认表格单元格呈现的宽度进行比较。

我想你会明白我的意思。这也在http://blog.anofsinger.com/2008/03/table-cell-box-model.html中有所记录。

如果您在此处查看示例http://codepen.io/morewry/pen/pqGhv，我的意图是展示表格单元格的内部宽度与div的内部宽度不同，即使两者都设置为width:200px。

然而，尽管它可能不是您所期望的宽度，并且在每个浏览器中宽度可能会有所不同，但单元格应该在每个浏览器中保持一致。

（至少我是这样期望的。）我期望如下：

• 您将表格单元格的宽度设置为200像素。
• Firefox可能返回199的宽度，IE可能返回201的宽度。这些宽度是准确的，并反映了每个浏览器的表格单元格框模型。
• 如果您将相同的宽度设置为th，只要它具有相同的边框和填充宽度，它将以与td相同的宽度呈现。

但是今天再次查看示例后，我发现使用JavaScript自动将每个th的宽度设置为与其对应的td相同，或者使用CSS将两者都设置为相同的宽度，有时在同一浏览器中th的宽度会与td不同。（我对此有一些难以言喻的想法，但可以说当出现（和消失）这种差异时，这确实很有趣。我比较了设置width与min-width与给整个表格设置width:100%等方法。）

我理解你的目标是固定表头。为此，我认为最好像Mike所示，将所有内容放在一个表格中，使用和。如果使用两个不同的表格，则会破坏“语义”-th除了视觉上没有与td任何关系。

然而，你可以像这样使用JavaScript（它至少在我所有的浏览器中都能工作，并且可能比浏览器检测更好）: http://codepen.io/morewry/pen/toCqs 像这样使用标记/ CSS 也为我解决了问题 http://codepen.io/morewry/pen/gjELD，而不需要JavaScript。 不确定这是否适用于所有情况（例如我没有IE9），或者是否可以在您需要的上下文中使用。

- morewry

---

所以您的想法是将 display:table-cell; 替换为 display:block;？目的是什么？ - c-smile

不好意思，这样做有什么意义呢？这不是一个解决方案，而是展示了表格单元格的盒模型与块级元素的盒模型不同。因此，你不能期望对于 td 使用 .width() 或 .outerWidth() 能得到与 div 相同的结果，而且结果以及它的变化会因浏览器而异。 - morewry

这让我意识到我可能没有表达清楚。"它很可能给出了正确的宽度 - 单元格内实际呈现的空间，只是这个数字不是你预期看到的数字。" 这样说有帮助吗？ - morewry

也许它本身并没有错，但是在各种现代浏览器中不一致。我想从ROW表格中获取单元格的宽度，并将其应用于HEAD表格中的单元格，以便两个表格在所有现代浏览器中都能完美对齐。但是还没有成功 :( - user169867

目前在不同的浏览器中，它们之间的表现会有所不同，因为每个浏览器使用不同的模型来计算表格单元格的宽度。在同一个浏览器中应该是一致的，但我发现在那个示例中 th 的宽度最终不同。我会继续寻找解决方案，但我认为 Mike 的示例是正确的方法... - morewry

Answer 3

看起来除了进行浏览器测试，可能没有其他修复方法：

将非Mozilla浏览器的宽度增加1像素似乎可以解决问题。 if(!$.browser.mozilla) { w++; }

我对这种修复方法并不满意，但还没有看到更好的解决方案。希望浏览器能尽快达成关于如何测量表格单元格的共识。

更好的解决方案是为什么CSS不支持固定表头表格的概念？！

- user169867

---

我会选择这样的方式，而不是仅仅在特定浏览器中添加1像素 http://jsfiddle.net/gP2YG/11/ - morewry