Firefox 中的 CSS Sprite 兼容性

Question

我有一个使用下面的 css 类的 div 元素。基本上，我正在创建一个在悬停时会发生变化的 sprite 图像链接。

.home {
    background: url('images/home.png') 0 0;
    width: 150px;
    height: 188px;
    border: none;   
}

.home:hover {
    background-position: -150px 0;  
}

当我用不同的浏览器测试它时，它似乎适用于除某些版本的 Firefox 之外的大多数浏览器。悬停时，它不会切换 img 位置。正如我从 w3c 中读到的，为了在 Firefox 中工作，“background-attachment”属性设置为“fixed”。我这样做并将该属性添加到两个类，但仍然没有用。当我添加该属性时，图像居中，不在指定宽度和高度内的任何内容都被裁掉。

Answer 1

这是一个没有看出问题的猜测，但有时在 FF 中使用背景速记可能会出现错误:

尝试:

.home {
  backround-image: url('images/home.png');
  background-position: 0 0;
  height: 188px;
  border: none;
}

.home:hover {
  background-position: -150px 0;
}