火狐浏览器中的CSS Sprite兼容性问题

Question

火狐浏览器中的CSS Sprite兼容性问题

3

我有一个使用以下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中工作，需要将"background-attachment"属性设置为"fixed"。我这样做了，并将该属性添加到两个类中，但仍然没有效果。当我添加属性时，图片被居中显示，而超出指定宽度和高度的部分被裁剪掉了。

- oipsl

在我的Firefox 3.6和4中运行良好。 - marissajmc

1

你能否重新制造一下问题，以便我们可以看到它？http://jsfiddle.net/ - thirtydot

我从2008年开始就一直这样做，而且一直都很好用（Firefox 3、4、5、6）。你在哪些Firefox版本和操作系统上遇到了问题？ - Erick Petrucelli

4个回答

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;
}

- lnguyen55

1

糟糕，看起来我忘记在文件开头添加DOCTYPE标签了，这导致在FF中无法正常工作。

已添加

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

它起作用了！

- oipsl

0

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

- user3453496

1

尝试更具体地指定在哪里使用这些CSS属性以及它如何回答问题。 - juanreyesv

通常最好解释一下你的解决方案为什么有效以及如何实现，这样有助于那些不理解的新手们 :) - Taryn East

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kevinjharley · Accepted Answer

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

尝试以下代码:

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

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