背景图像突然消失于某些屏幕尺寸上的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

回答

相关问题