嗨,我正在与精灵合作,并获得一些有趣的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张图片
见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;}
这可能是跨浏览器兼容的,因为每个单元的整数长度不会小得多.
让我知道如果它有效,你没有在您的问题中发布任何代码作为演示示例,所以我没有编译演示,但我希望解决方案背后的想法是明确的.