背景圖像突然消失於某些屏幕尺寸上的Chrome

我的網站上我有其中含有大量的divs與背景圖像一個i元素呈現的容器。這些i元素都具有相同的背景圖像，但具有不同背景的位置，以便只有一個HTTP請求必須進行，這對於小圖標一般的最佳實踐。 div應該在容器中水平居中。背景圖像突然消失於某些屏幕尺寸上的Chrome

我的問題是，Chrome和Firefox瀏覽器（最新版本）的背景圖像的呈現按預期在某些（寬）的屏幕尺寸是行不通的。特別是在Chrome上，它將永遠不會顯示某些元素的背景圖像，除非該元素被徘徊，並且在Firefox上它根本不會渲染背景圖像。

如果我添加float: left到divs容器內的渲染問題就解決了。不過，我想讓容器中的元素居中，而不是左邊的浮動元素。

我的問題是我在做什麼，這是造成某些瀏覽器的這種行爲，我怎麼可以嘗試解決它？

你可以看看這個問題，你自己上：

http://staging.koreanbuilds.net

這裏是行爲上的Chrome 和火狐

這個截圖是CSS代碼容器和元件：

/* Container of clickable champion icons */ 
#champContainer { 
    width: 100%; 
    padding-right: 10px; 
    padding-left: 10px; 
    text-align: center; 
    position: relative; 
} 

/* Champion images div container class */ 
.champIcon { 
    width: 65px; 
    height: 65px; 
    margin: 1px auto; 
    overflow: hidden; 
} 

.champIcon i { 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    -ms-transition: all 0.3s ease; 
} 

.champIcon i:hover { 
    zoom: 1.05; 
    cursor: pointer; 
    -moz-transform:scale(1.05); 
    -moz-transform-origin: 0 0; 
}

此外t他的div有這兩個類

.nodisplay { 
    display: none; 
} 

.yesdisplay { 
    display: inline-block; 
}

的i個元素總是有下面的類

.chmp { 
    display: inline-block; 
    overflow: hidden; 
    text-indent: -9999px; 
    text-align: left; 
    cursor: pointer; 
}

以及限定所述背景圖像和位置例如一個類的一個

.chmpashe { 
    background-image: url(http://statics.koreanbuilds.net/champion_65x65/sprite.png); 
    background-position: 0 -455px; 
    width: 65px; 
    height: 65px; 
}

來源

2017-10-06 Jakob Abfalter

*那些i個元素都具有相同的背景圖像，但是具有不同背景的位置，使得只有一個http請求已經被作出，這對於較小的圖標一般的最佳做法。*這被稱爲* [精靈]（ https://css-tricks.com/css-sprites/)*。 –

顯然我知道，但我認爲我不應該假設每個人都這麼做 –

嗯，這樣做並不「明顯」，否則我不會發表評論。 –

我沒有看到你的代碼有什麼問題。它看起來像這可能是你所看到here同樣的問題，因爲我似乎無法加載spritesheet它自己在Firefox

這可能是值得切割精靈表單下來，測試其是否正常工作。

希望幫助！

編輯：

看你活的網站，你有一個更傳統形狀的樣式表不超越乙醚尺寸1000個像素。它看起來像你在舞臺上使用的超過80,000像素，這看起來是你的問題。

來源

2017-10-06 16:32:00 Dave

感謝您的回答。有趣的是，在網站http://koreanbuilds.net的Live版本中，我使用了一個更大版本的精靈，它沒有任何問題。這可能是Firefox不喜歡新的spritesheet的垂直對齊。我會檢查的！ –

與spritesheet的非常高的高度相關的垂直對齊確實引起了問題。更改爲壓縮版式解決了Chrome和Firefox中的問題 –

背景圖像突然消失於某些屏幕尺寸上的Chrome

回答

相關問題