为什么“填充”有时会在元素宽度内计数，有时不会？答案

【问题标题】：Why does 'padding' sometimes count inside an element width, and sometimes not?为什么“填充”有时会在元素宽度内计数，有时不会？
【发布时间】：2011-03-28 12:27:38
【问题描述】：

我制作了一个书签，除其他外，它可以在“弹出”div 中加载表单。我在我创建的每个元素上重置了人类已知的每个 CSS 标记，据我所知，在 firebug 中检查它，没有 CSS 标记“渗入”。但是，在某些页面上，输入宽度包括其填充：

input.clientWidth = input.style.width

在其他页面上，输入宽度不包括填充：

input.clientWidth = input.style.width + input.style.paddingLeft + input.style.paddingRight

因此，这里有一个小代码sn-p：

input.style.width = '300px';
input.style.border = '1px solid grey';
input.style.padding = '20px';
alert(input.clientWidth);

在某些页面上，此警报 298（300 - 1px 边框），而在其他页面上，此警报 338（300 - 1px 边框 + 20 + 20）。这是什么原因造成的？更重要的是，我能做些什么来获得一致的行为？

编辑：

这一切都在同一个浏览器中 - Firefox 3.6.8

【问题讨论】：

标签： css input width padding

【解决方案1】：

对于 IE，可能是某些页面处于 quirks 模式，其中框模型不是使用的标准模型。

对于标准模式，document.compatMode 是 CSS1Compat，对于怪癖模式是 BackCompat。你可以据此进行计算。

如果您向我们展示两个不同的单独页面显然会有所帮助，但由于它是一个书签，并且在不同的网站上调用它是有意义的。

【讨论】：

谢谢！这就是问题所在（尽管它与 IE 无关）。假设我想要所有这些页面的一致性，我需要检查哪些不同的兼容性模式？
这是 AFAIK 仅有的两种模式。
非常感谢。我有点惊讶地注意到 amazon.com 使用 BackCompat！

【解决方案2】：

为了获得一致的行为，您可以将填充、边距和边框分解为每个宽度，即（伪代码）

totalWidth = input.width + input.padding + input.margin + input.border;

显然，你必须做一些字符串操作来挑选那里的整数，然后添加它们。

【讨论】：