CSS布局的问题，当改变边框宽度通过JavaScript

Question

下面是我用最近的一个项目中遇到的问题的一个例子：

http://jsfiddle.net/ZCpAT/12/

注意如何点击一个框，添加后.Highlighted节点类（它修改边框宽度和边框颜色），框内容在chrome和safari中向右移动一点，之前突出显示的框的内容向左移动。奇怪的是，当我使用Chrome的开发工具尝试触摸任何两个类别中的任何样式时，所有div的内容都会返回原始位置。

我在这里错过了一些东西，以防止这种变化的行为发生？

Answer 1

而不是搞乱宽度和高度，你可以改变填充来代替边框。

在.node中，边框为1px，填充为4px。在.highlighted节点中，边框是5px，所以填充应该小4px（= 0px）。

http://jsfiddle.net/ZCpAT/16/

或者，用均为15px/11像素的顶部填充：

http://jsfiddle.net/ZCpAT/19/

要解释为什么你的解决方案没有奏效：

框的尺寸保持同样，因为你改变了宽度和高度，但是盒子的内容完全不受盒子宽度和高度的影响，因为它们是左对齐的。

内容的左侧位置=框边距+边框+填充。所以在一种情况下，它是10 + 1 + 5 = 16px，而另一种情况下是10 + 5 + 5 = 20px，向右（和向下）移动4px。