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

问题

嗨,我正在与精灵合作,并获得一些有趣的Firefox和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;}

[...]

我的精灵的每个图像的大小为50×50(px),大约是2到6 KB.
我已经用jpg,png和gif类型测试了它们.都得到了相同的结果.

截图

655张图片

656张图片

编辑：如果问题的原因不是CSS长度的整数值,那么这个浏览器的最大图像大小是可以处理的.这可能是更重要的情况在这里重新阅读你的问题.

见Firefox Bug 591822: Images taller or wider than 32767

我使用以下计算的值通过google快速查找该票;)

如果你想要它工作,帮助cairo,the underlying image library.

你也可以做的不是只将你的精灵分散在一个轴上(在你的情况下),而是在(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).

对于sprite#655,偏移量为654 * -50,为-32,700.

精灵#656的偏移量为655 * -50,750.

精灵#657的偏移量为656 * -50,800.

16位,无符号integer ^Wikipedia(半字,字,短)的范围为0到65535,与-32,768到32,767的对应字.

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

-32,800 is lower than -32,768

在这种情况下可能发生的事情是,它会得到一个往返：

-32,800 => 32

如果您将精灵窗格放在(相对)坐标-32(这是不可能的)上,您可能可以看到它.

这只是一个假设,我没有浏览器的源代码检查,所以拿一粒盐.

然而,这可能导致一些快速解决的策略,如果事实证明是快速的,公平的：

如何解决？

您可以尝试(只要渲染算法不受此影响),使用另一个单元.将所有的精灵都放入父元素,例如a÷

<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;}

这可能是跨浏览器兼容的,因为每个单元的整数长度不会小得多.

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

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

相关文章