Webkit和Firefox之间“scrollWidth”的行为不一致

Question

我有一组标题div需要匹配它们下面的内容div的宽度。通常，内容div比标题div更薄，并且它们的大小可能不同。

所以，我所做的是设置标题div的宽度以匹配内容div的宽度。然后，因为我希望标题和内容足够宽以不切断任何单词，我检查每个标题的“scrollWidth”属性，看它是否大于其“offsetWidth”属性，然后设置标题的内容和标题宽度scrollWidth。

header.style.width = tableCell.offsetWidth + "px";
if (header.scrollWidth > header.offsetWidth) {
    content.style.width = header.scrollWidth + "px";
    header.style.width = header.scrollWidth + "px";
}

这适用于Safari和Chrome，但在FireFox中根本不起作用。使用Firefox，“scrollWidth”返回与标题设置宽度相同的值。

“听起来像是使用牌桌的好时机”你说，但我不能。标题需要在页面顶部保持静态。

那么，在这些条件下，如何让Firefox在scrollWidth中返回等效值呢？我已经尝试将标题div的溢出设置为“隐藏”和“滚动”，但这并没有影响任何内容。

Answer 1

Firefox似乎包含边框宽度，Chrome没有。我在Firefox时不得不减去边框宽度。哈基，但它奏效了。

Answer 2

我在stackoverflow上回答了类似的问题：Why scrollWidth doesn't work in this case in Firefox?

问题是当溢出可见时，Firefox会返回scrollWidth的clientWidth值。

我在Firefox中找到的解决方法是将溢出设置为隐藏，获取正确的scrollWidth并将溢出恢复为可见。链接中的更多详细信息和代码。