Firefox中的CSS Sprite兼容性

我有一个使用下面的css类的div元素。基本上，我正在创建一个在悬停时发生变化的精灵图像链接。Firefox中的CSS 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中工作时，“后台附件”属性为“固定”。我做到了这一点，并将这个属性添加到这两个类中，但仍然无法工作。当我添加属性时，图像居中，并且不在指定宽度和高度内的任何内容被切断。

来源

2011-08-31 oipsl

在Firefox 3.6和4中对我很好用 – marissajmc

您可以重新创建问题以便我们看到它吗？ http://jsfiddle.net/ – thirtydot

我从2008年开始这样做，并且一直运行良好（Firefox 3，4，5，6）。什么是Firefox版本和什么操作系统你有问题？ –

哎呀，它看起来像我忘了开头的文件，它促成了东西FF不工作添加DOCTYPE标签。

增加

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

和它的工作！

来源

2011-09-17 01:03:44 oipsl

这是一种猜测，没有看到问题，但有时使用背景速记可以Buggy在FF：

尝试：

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

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

来源

2011-09-09 23:32:21 kevinjharley

你必须有no-repeat的背景图像。火狐工作正常与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; 
}

来源

2011-09-10 02:26:28 lnguyen55

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

来源

2014-03-23 22:52:22 user3453496

尝试指定更多的位置在哪里使用这些CSS属性以及它如何回答问题 – juanreyesv

解释为什么+您的解决方案如何工作通常是一个好主意..为了观看不明白的n00bs的好处:) –

Firefox中的CSS Sprite兼容性

回答

相关问题