css - 关于 css border、margin、padding 和 width

Question

使用 css border、margin、padding 和 width 我遇到了一个额外的像素...

我知道元素的总宽度和高度是其宽度、边框、边距和填充的总和。

如果你看这个http://jsfiddle.net/Fs8HQ/ ，一切似乎都有效。当您单击按钮时，将一些像素从边框移动到边距会创建一个伪动画。

现在让我们在http://jsfiddle.net/Fs8HQ/1/中设置一个固定的宽度和高度(从 :active 中删除宽度和高度):在 Firefox 和 Chrome 中，有一个额外高度和一个额外宽度像素，用于移动所有相邻元素。在 Opera 中，有一个超宽像素和两个超高像素。它们来自哪里？

但是在这里http://jsfiddle.net/hJTpY/将像素从边框移动到填充似乎可以解决所有问题，但伪动画并不相同。

在前两个 fiddle 中，边界被缩小到接近内容；在最后一个中，边界被扩展的内容缩小了。

为什么会这样？我错过了什么？

Answer 1

这是我最近注意到的一个问题:

如果声明了正确的文档类型，W3C 引入的默认框模型是 content-box(与可以通过在 IE 中使用 quirks-mode 触发的 Microsoft 框模型相矛盾)。

但是，最近我注意到浏览器具有声明 box-sizing:border-box 的 UA 样式(仅用于输入元素？)。这就是为什么您的技巧不起作用的原因，因为边框已计入宽度。要解决此问题，您必须声明 box-sizing:content-box。参见 this question处理同样的问题。