保证金+填充不会对Chrome进行补偿

Question

说到浏览器差异，Chrome看起来处理保证金+填充的方式与其他方式略有不同。

以此为例，其目的是通过负边距显示扩展背景，同时通过填充补偿保留文本位置：

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

只要你的display强制执行阻止显示（但可以暗示水平移动，例如你使用inline-block），但是使用{{1}将奇怪地“缩小”链接1 px（从右侧或左侧，取决于文本宽度和容器宽度），好像悬停的内联链接小于非悬停链接（当然，如果没有这样的话，这不会发生）定型）。

这些动作都不会出现在Firefox或Safari上。 请参阅demonstration of issue here。

有人可以解释一下吗？这是Chrome或Chrome功能特有的错误（例如，我看到inline和-webkit-margin-after？更糟糕的是，我们将不胜感激。感谢。

Answer 1

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

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

em测量是动态的，并且镀铬似乎计算出填充与边距略有不同的测量值

Answer 2

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

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

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