这是我在最近的项目中遇到的问题的一个示例：
请注意，在单击一个框并向其添加 .highlighted-node 类（修改边框宽度和边框颜色）后，框的内容如何在 chrome 和 safari 中向右移动一点，并且先前突出显示的框的内容发生了移动向左转。奇怪的是，当我尝试使用 Chrome 的开发工具触摸 2 个类中的任何一个样式时，所有 div 的内容都返回到它们的原始位置。
我是否在这里遗漏了一些东西以防止这种转变的行为发生？
问问题
505 次
1 回答
6
您可以更改填充以替换边框，而不是弄乱宽度和高度。
在 .node 中，边框为 1px，边距为 4px。在 .highlighted-node 中，边框是 5px，所以 padding 应该小 4px (=0px)。
或者，使用 15px/11px 的顶部填充：
解释为什么您的解决方案不起作用：
盒子的大小保持不变，因为您更改了宽度和高度，但盒子的内容完全不受盒子的宽度和高度的影响，因为它们是左（和顶部）对齐的。
内容的左侧位置 = 框边距 + 边框 + 内边距。所以在一种情况下是 10 + 1 + 5 = 16px，而在另一种情况下是 10 + 5 + 5 = 20px，向右（向下）移动 4px。
于 2012-10-16T14:54:46.600 回答