css - 为什么 'padding' 有时会算在元素宽度内，有时不会？

Question

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

input.clientWidth = input.style.width

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

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

因此，这是一个小代码片段:

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

在某些页面上，这会提醒 298(300 - 1 像素边框)，而在其他页面上，这会提醒 338(300 - 1 像素边框 + 20 + 20)。是什么原因造成的？更重要的是，我该怎么做才能获得一致的行为？

编辑:

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

Answer 1

对于 IE，可能是某些页面处于怪异模式，其中盒子模型不是所使用的标准模型。

对于标准模式，document.compatMode 将是 CSS1Compat，对于 quirks 模式，将是 BackCompat。您可以基于此对计算进行分支。

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