css - Firefox:一些 Sprite 未显示:在 IE/Chrome/Opera 中完美运行

Question

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

我们有一个包含许多旗帜图标的页面，这些图标都出现在一个图像文件中，并使用 CSS 拆分为 Sprite 。该页面在 IE/Chrome/Opera 上运行完美，但在 Firefox 上只有其中一些图像未显示。我附上了屏幕截图，链接是 http://colnect.com/en/gift_cards/companies/sort/by_count

Answer 1

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

也许背景图片太大了。它有 16,000 像素高。

背景位置仅在类名_f2307 (background-position: 0 -8160px;)，类名_f2308 (background-position: 0 -8192px;) 和任何后续的类名都会失败。

也许使用类似 spritesmith 的东西(当我发现它的那一刻，我就爱上了它。我将它与 grunt 一起使用)来创建一个 Sprite 图像，它由几行和几列 Sprite 片段组成，而不仅仅是一列。

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

也许您刚刚发现了一个错误。您应该将其提交给 mozilla。

---

附录

问题一定是其他问题，正如您在代码笔中看到的那样:http://codepen.io/HerrSerker/pen/azNQqR

向下滚动，.four被打断，.five完成。唯一不同的是 border 值