Firefox和Chrome在655张图片后停止显示我的精灵

Question

问题

嗨，我正在使用精灵，并获得了一些火狐和Chrome的有趣行为。当我的精灵有 655 图像或更少时，我的精灵工作正常。但是当它更进一步（656或更多）时它不会显示（只是变得不可见）。我猜这个问题不在我的代码中，因为它在Opera和IE中运行良好。怎么样？

---

细节

我正在使用PHP来动态生成精灵。生成的html如下：

<span class="_sprite_images _sprite_images_1"></span>
<span class="_sprite_images _sprite_images_0"></span>
<span class="_sprite_images _sprite_images_2"></span>
<span class="_sprite_images _sprite_images_3"></span>
<span class="_sprite_images _sprite_images_4"></span>
<span class="_sprite_images _sprite_images_5"></span>

[...]

，CSS看起来像这样：

._sprite_images{background:url("../sprite_images/sprite.jpg");display:inline-block;}

._sprite_images_0{width:50px;height:50px;background-position:0 0px;}
._sprite_images_1{width:50px;height:50px;background-position:0 -50px;}
._sprite_images_2{width:50px;height:50px;background-position:0 -100px;}

[...]

我的精灵的每张图片大小为50x50（px），大约为2到6 KB。 我用jpg，png和gif类型测试了它们。所有结果都相同。

---

截图

655张图片

656张图片

Answer 1

编辑：如果问题的原因不是CSS长度整数值，那么它是所讨论的浏览器可以处理的最大图像大小。这可能是重新阅读你的问题的情况。

请参阅Firefox Bug 591822: Images taller or wider than 32767

我使用下面计算的值通过谷歌快速查找该票证;）

如果您希望它起作用，请帮助cairo, the underlying image library。

你还可以做的是不将你的精灵分散在一个轴上（仅在你的情况下是y），而是在（x和y）上：

0: 0 0
...
654: 0 -32700
655: -50 0

等等。 PHP：

$offset = -50;
$x = (int)($n/655) * $offset;
$y = $n % 655 * $offset;

---

每个精灵的偏移量为-50。

第一个精灵的偏移量为0（(1-1) * -50）。

对于精灵＃655，偏移量为654 * -50，即-32,700。

精灵＃656的偏移量655 * -50为-32,750。

精灵＃657的偏移656 * -50为-32,800。

16位无符号integer ^Wikipedia（半字，字，短）范围从0到65535，它是从-32,768到32,767的对应字符。

只是比较这些值显示，如果有问题的浏览器使用该数据类型来存储像素单元的整数值，它将无法：

-32,800 is lower than -32,768

在这种情况下会发生的是，它正在往返：

-32,800 => 32

如果你在精灵窗格上放置一个精灵（相对）坐标-32（这是不可能的），你可能会看到它。

这只是一个假设，我没有检查所讨论的浏览器的源代码，所以请耐心等待。

然而，这可能会导致一些快速解决策略，如果结果很快就会公平：

如何解决？

您可以尝试（只要渲染算法不受此影响），使用其他单位。将所有精灵放入父元素，例如<div>：

<div class="sprites">
  <span class="img-1"></span>
  <span class="img-2"></span>
  <span class="img-3"></span>
  ...
  <span class="img-656"></span>
</div>

CSS：

div.sprites {font-size:50px;}
    div.sprites span {background: ... ; height: 1em; width: 1em;} /* default sprite definition*/
        div.sprites span.img-1 {background-position:0 0;}
        div.sprites span.img-2 {background-position:0 -1em;}
        div.sprites span.img-3 {background-position:0 -2em;}
        ...
        div.sprites span.img-656 {background-position:0 -655em;}

这可能更兼容跨浏览器，因为每个单元的整数长度不会太小。

让我知道如果它有效，你没有在你的问题中发布任何代码作为演示示例，所以我也没有编译演示，但我希望解决方案建议背后的想法是明确的。