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。