Firefox：一些没有显示的精灵：在IE / Chrome / Opera中完美运行

Question

更新：问题中的链接现在不会显示问题，因为我已将精灵更改为更短，更平方的精灵。这会在压缩的PNG文件和生成的CSS中花费一些额外的KB。

我们有一个页面，其中包含许多标志图标，这些图标都存在于单个图像文件中，并使用CSS分割为精灵。该页面在IE / Chrome / Opera上完美运行，但在Firefox上只显示其中一些图像。我已附加屏幕截图，链接为http://colnect.com/en/gift_cards/companies/sort/by_count

Answer 1

我在Win 8上的Firefox 34.0.5中看到了这一点

背景图像可能太大了。 高达16,000像素。

background-position仅适用于具有类名_f2307 (background-position: 0 -8160px;)，类名_f2308 (background-position: 0 -8192px;)且任何后续类名失败的元素。

也许使用像spritesmith这样的东西（我发现它的那一刻。我用它咕噜咕噜地使用它）来创建一个精灵图像，它包含几行精灵段和精灵段而不仅仅是一栏。

虽然这似乎低于在互联网上浮动的32768像素的限制，但在最近的firefox实现中可能会有一个未记录的功能。但是否则8192等于32768除以4。这可能是一个有意义的数字。

也许你刚刚发现了一个错误。你应该把它归档给mozilla。

---

附录

问题必须是其他内容，您可以在此代码中看到：http://codepen.io/HerrSerker/pen/azNQqR

向下滚动，.four被中断，.five已完成。唯一的区别在于border值