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样式定义中，则当您悬停时奇怪的移动会消失。

Answer 2

对于您的#block-menu-block-2 ul.menu li a CSS规则，您有border-box错误的属性，因为您正在尝试执行此操作。现在，你有background-origin下的错误。您正在寻找的是box-sizing属性。它应该是这样的：

#block-menu-block-2 ul.menu li a  {

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;       

}

现在，您可以将border: 4px solid transparent添加到＆＃34;正常＆＃34;状态，它应该按照你想要的方式工作。

您可以在此处详细了解这个不错的CSS属性：http://css-tricks.com/box-sizing/

Answer 3

background简写属性可用于设置每个 background-属性，包括background-origin。当简写属性覆盖特定属性时，Web检查器不会在其“规则”面板中显示特定的属性。但是，如果查看“计算样式”面板，您可以看到这些链接元素仍在计算为background-origin: padding-box。

将!important添加到后台原始规则，在background规则之后复制它，或将其添加到background规则本身可以解决问题。

当悬停时出现边框时，背景原点不起作用

3 个答案: