Firefox 中的 CSS Sprite 兼容性
我有一个使用下面的 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”。我这样做了并将属性添加到两个类中，但仍然不起作用。当我添加该属性时，图像居中，所有不在指定宽度和高度范围内的内容都会被切除。
I have a div element that uses the css classes below. Basically, I'm creating a sprite image link that changes on hover.
.home {
background: url('images/home.png') 0 0;
width: 150px;
height: 188px;
border: none;
}
.home:hover {
background-position: -150px 0;
}
When I tested it with different browsers, it seemed to work well with most browsers except for some versions of Firefox. On hover, it doesn't switch the img position. As I read from w3c for this to work in Firefox, the "background-attachment" property to "fixed". I did this and added the property to both classes and still didn't work. When I added the property, the image was centered, and whatever was not within the specified width and height were cut off.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这是没有看到问题的猜测，但有时使用后台速记可能会在 FF 中出现错误：
尝试：
This is a guess without seeing the problem, but sometimes using the background shorthand can be buggy in FF:
try :
您必须为背景图像设置
no-repeat。 Firefox 在使用background-position时可以正常工作，但background-position-x和background-position-y则无法使用。我不知道您愿意对哪个元素执行什么操作，但它应该仅适用于块元素。如果不是块元素，则需要display: blockYou have to have
no-repeatfor background image. Firefox works fine withbackground-positionbutbackground-position-xandbackground-position-ywont work. I don't know what you are willing to do for which element, but it should work on block elements only. If it's not a block element,display: blockis required糟糕，看来我忘记在文件开头添加 DOCTYPE 标记，这导致了 FF 中无法正常工作。
添加
并成功了！
Oops, it looks like I forgot to add the DOCTYPE tag at the beginning at the file, which contributed to the thing not working in FF.
Added
and it worked!