javascript - Webkit 和 Firefox 之间的 "scrollWidth"行为不一致

Question

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

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

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”返回与 header 设置宽度相同的值。

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

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

Answer 1

Firefox 似乎包含边框宽度，而 Chrome 则没有。当我使用 Firefox 时，我必须减去边框宽度。哈基，但它有效。