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

Question

这是我在最近的元素中遇到的问题的示例:

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

请注意在单击一个框并向其添加 .highlighted-node 类(修改 border-width 和 border-color)后，框内容如何在 chrome 和 safari 中向右移动一点，而之前突出显示的框的内容向左移动。奇怪的是，当我尝试使用 Chrome 的开发工具在两个类中的任何一个中触摸任何样式时，所有 div 的内容都会返回到它们的原始位置。

我是否遗漏了一些东西来防止这种转变行为的发生？

Answer 1

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

在.node中，border是1px，padding是四边4px。在.highlighted-node中，border是5px，所以padding应该小4px(=0px)。

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

或者，顶部内边距为 15px/11px:

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

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

框的大小保持不变，因为您更改了宽度和高度，但是框的内容完全不受框的宽度和高度的影响，因为它们是左(和上)对齐的。

内容的左边位置= box margin + border + padding。所以在一种情况下它是 10 + 1 + 5 = 16px，而在另一种情况下它是 10 + 5 + 5 = 20px，向右(和向下)移动 4px。