Firefox 中的 CSS Sprite 兼容性答案

【问题标题】：CSS Sprite Compatibility in FirefoxFirefox 中的 CSS Sprite 兼容性
【发布时间】：2014-03-24 06:52:22
【问题描述】：

我有一个使用以下 css 类的 div 元素。基本上，我正在创建一个在悬停时更改的精灵图像链接。

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

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

当我用不同的浏览器测试它时，它似乎在大多数浏览器上都能很好地工作，除了某些版本的 Firefox。悬停时，它不会切换 img 位置。正如我从 w3c 中读到的那样，它可以在 Firefox 中工作，“背景附件”属性为“固定”。我这样做并将该属性添加到两个类中，但仍然无法正常工作。当我添加属性时，图像居中，超出指定宽度和高度的部分被切除。

【问题讨论】：

在 Firefox 3.6 和 4 中对我来说很好用
你能重现问题以便我们看到吗？ jsfiddle.net
我从 2008 年开始就这样做了，并且一直运行良好（Firefox 3、4、5、6）。您在哪些 Firefox 版本和哪些操作系统上遇到问题？

标签： css css-sprites

【解决方案1】：

这是没有看到问题的猜测，但有时在FF中使用后台速记可能会出现问题：

试试：

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

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

【讨论】：

【解决方案2】：

背景图片必须有no-repeat。 Firefox 可与 background-position 一起正常工作，但 background-position-x 和 background-position-y 无法正常工作。我不知道你愿意为哪个元素做什么，但它应该只适用于块元素。如果不是块元素，则需要display: block

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

【讨论】：

【解决方案3】：

糟糕，我好像忘记在文件的开头添加 DOCTYPE 标记，这导致该东西在 FF 中不起作用。

添加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

它成功了！

【讨论】：

【解决方案4】：

 background-position: 0px 0px;
 background-position: -150px 0px;

【讨论】：

尝试详细说明在何处使用这些 CSS 属性以及它如何回答问题
解释一下您的解决方案的工作原理和原理通常是一个好主意.. 为了让看不懂的 n00bs 受益:)