css - 悬停时出现边框时，background-origin 不起作用

Question

In this Codepen ，您会看到我有一些链接，每个链接都有多个定位的背景图像。我已将边框设置为在悬停时显示，网站上的所有内容都使用 box-sizing: border-box。我的理解是，将 background-origin CSS 属性设置为 border-box 应该使这些定位样式呈现相同，无论边框是什么；图像应相对于内容、填充和边框的外边缘定位。

但是当您将鼠标悬停在它们上方时，看起来 background-origin 根本不起作用。当边框出现时，背景图像会移动以适应边框所在的空间，因此就像它们是 background-origin: padding-box 一样。这发生在 Safari、Chrome 和 Firefox 中。

这是我的误解，还是普遍存在的浏览器错误，还是什么？

Answer 1

我认为问题是因为在将鼠标悬停在这些图像上之前，它们没有任何边框。

如果您将此 border:4px solid transparent; 添加到您的 #block-menu-block-2 ul.menu li a 样式定义中，当您悬停时奇怪的移动消失了。