In this Codepen ,您会看到我有一些链接,每个链接都有多个定位的背景图像。我已将边框设置为在悬停时显示,网站上的所有内容都使用 box-sizing: border-box
。我的理解是,将 background-origin
CSS 属性设置为 border-box
应该使这些定位样式呈现相同,无论边框是什么;图像应相对于内容、填充和边框的外边缘定位。
但是当您将鼠标悬停在它们上方时,看起来 background-origin
根本不起作用。当边框出现时,背景图像会移动以适应边框所在的空间,因此就像它们是 background-origin: padding-box
一样。这发生在 Safari、Chrome 和 Firefox 中。
这是我的误解,还是普遍存在的浏览器错误,还是什么?
最佳答案
我认为问题是因为在将鼠标悬停在这些图像上之前,它们没有任何边框。
如果您将此 border:4px solid transparent;
添加到您的 #block-menu-block-2 ul.menu li a
样式定义中,当您悬停时奇怪的移动消失了。
关于css - 悬停时出现边框时,background-origin 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23617157/