通过javascript更改边框宽度时Chrome/Safari的CSS布局问题

Question

这是我最近一个项目遇到的问题的一个例子:

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

注意在点击一个框并向其添加.highlighted-node类(修改border-width和border-color)之后,框内容在chrome和safari中向右移动一点,并且之前突出显示的框的内容发生了变化向左转.有点奇怪的是,当我尝试使用Chrome的开发工具触摸任意两个类中的任何一种风格时,所有div的内容都会回到原来的位置.

我在这里遗漏了一些东西以防止这种转变行为的发生吗？

Answer 1

您可以更改填充以替换边框,而不是弄乱宽度和高度.

在.node中,边框为1px,填充边为4px.在.highlighted-node中,边框为5px,因此填充应该小4px(= 0px).

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

或者,顶部填充为15px/11px:

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

解释为什么您的解决方案不起作用:

盒子的大小保持不变,因为你改变了宽度和高度,但盒子的宽度和高度完全不影响盒子内容,因为它们是左(和顶)对齐的.

内容的左侧位置=框边距+边框+填充.因此,在一种情况下,它是10 + 1 + 5 = 16px,而在另一种情况下,它是10 + 5 + 5 = 20px,向右(和向下)移动4px.