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

Question

在我的網站上，我有一個容器，其中渲染了許多包含一個帶有背景圖像的i元素的divs 。 這些i元素都具有相同的背景圖像，但背景位置不同，因此僅需發出一個http請求，這是較小圖標的一般最佳實踐。 div應在容器中水平居中。

我的問題是，在Chrome和Firefox瀏覽器（最新版本）上，背景圖片的呈現無法在某些（寬）屏幕尺寸上正常工作。 特別是在Chrome上，除非將元素懸停，否則它始終不會顯示某些元素的背景圖像；而在Firefox上，它將完全不顯示背景圖像。

如果我在容器內的divs添加float: left divs則渲染問題已解決。 但是，我想讓元素居中放置在容器中，而該容器不能與左浮子一起工作。

我的問題是我在做什么，這導致某些瀏覽器上出現此行為，我該如何解決呢？

您可以自己查看以下問題：

http://staging.koreanbuilds.net

這是Chrome上的行為的屏幕截圖 並在Firefox上

這是容器和元素的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;
}

此外，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;
}

Answer 1

我看不到您的代碼有什么問題。 看來這可能是您在這里看到的相同問題，因為我似乎無法在Firefox中自行加載您的Spritesheet

可能需要削減Sprite表並測試是否可行。

希望有幫助！

編輯：

在您的實時站點上，您會看到形狀更為傳統的樣式表，其以太尺寸不會超過1000像素。 看來您在分期中使用的像素超過了80,000像素，這似乎是您的問題所在。