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兼容性

回答

相關問題