边距+填充在 Chrome 上不补偿答案

【问题标题】：Margin+padding doesn't compensate on Chrome边距+填充在 Chrome 上不补偿
【发布时间】：2015-05-01 09:37:03
【问题描述】：

说到浏览器的差异，看起来 Chrome 处理边距+填充的方式与其他浏览器有点不同。

以这个例子为例，它旨在通过负边距显示扩展背景，同时通过填充补偿保留文本位置：

a:hover {
  background: lightblue;
  padding: 0.3em;
  margin: -0.3em;
}

只要你的 display 强制 block 显示，它就可以正常工作（但可以暗示水平移动，例如，如果你使用 inline-block），但使用 inline 会奇怪地“缩小”链接 1 px（从右侧或左侧，取决于文本宽度和容器宽度），好像悬停的内联链接小于非悬停的链接（当然，如果没有这种样式，这不会发生）。

这些动作都不会发生在 Firefox 或 Safari 上。见demonstration of issue here。

有人能解释一下吗？它是 Chrome 特有的错误还是 Chrome 功能（例如，我看到有 -webkit-margin-after 和 -webkit-margin-before）？更糟糕的是，将不胜感激解决方法。谢谢。

【问题讨论】：

看起来主要是一个四舍五入的问题——在你的例子中将.3 提高到.5，效果就消失了……是否有“解决方法”，取决于问题的复杂性和什么你想在这里实际实现......对于你的简单示例，你可以简单地设置链接开始的填充和负边距，并且只在悬停时更改背景。
只需在您的填充/边距样式中使用像素而不是 em，您的问题就解决了

标签： css google-chrome hover margin padding

【解决方案1】：

我认为这与 CSS 中的半像素有关。如果发现它也很有趣。我们在这里使用相同的演示：http://jsfiddle.net/oof5zjdw/12/

所以注意这个风格border-right: .5px solid red;

Firefox 会显示它（1px 或接近 1px，无法确定），但 Safari/Chrome 根本不会显示它。

【讨论】：

【解决方案2】：

这与您使用em 而不是px 之类的具体规则有关。你可以在这里看到：

http://jsfiddle.net/oof5zjdw/10/

em 测量是动态的，chrome 计算的填充与边距的测量似乎略有不同

【讨论】：