html5 - Firefox中的CSS3自适应图像Sprite兼容性

见Demo。请查看Chrome和firefox，感受不同之处
我有一个div元素，它使用下面的css类。基本上，我正在创建一个响应的图像精灵：

.what-wwb-logo, .what-national-geographic-logo, .what-atm-logo, .what-us-ski-logo-large, .what-boart-logo,
.what-comas, .what-left-arrow, .what-right-arrow{
     max-width: 100%;
     background-size: 100%;
     background-image: url('/images/sprites/what_our_client_say_new.png');
}
.what-wwb-logo {
     background-position: 0 0%;
     background-size: 100%;
     padding-bottom: 41%;
}
.what-national-geographic-logo {
     background-position: 0 16.588419%;
     background-size: 118.648019%;
     padding-bottom: 59%;
     max-width: 77%;
}
.what-atm-logo {
     background-position: 0 42.466823%;
     background-size: 146.685879%;
     padding-bottom: 94%;
     max-width: 100%;
}
.what-us-ski-logo-large {
     background-position: 0 65.003723%;
     background-size: 181.785714%;
     padding-bottom: 65%;
     max-width: 70%;
 }
.what-boart-logo {
     background-position: 0 84.194978%;
     background-size: 200.393701%;
     padding-bottom: 84%;
     max-width: 84%;
 }
.what-comas {
     background-position: 0 92.206077%;
     background-size: 435.042735%;
     padding-bottom: 62%;
     max-width: 80%;
 }
.what-left-arrow {
     background-position: 0 96.196003%;
     background-size: 820.967742%;
     padding-bottom: 93%;
     min-width: 7px;
 }
.what-right-arrow {
     background-position: 0 100%;
     background-size: 820.967742%;
     padding-bottom: 93%;
     min-width: 7px;
 }

在我的HTML中，我有以下代码：

<div class="what-right-arrow " />
...
<div class="what-left-arrow " />
...
<div class="what-comas" />
...
<div class="what-boart-logo" /> // and so on and all divs in different position

我在Chrome、IE和Firefox中运行了HTML。它在Chrome和IE中运行良好，但在Firefox中没有。
问题是图像（仅what-right-arrow、what-left-arrow和what-comma）一直在振动（上下、左右）。
是spring没有正确完成，还是Firefox有问题？

最佳答案

我认为这是一个火狐的问题，因为有一些关于在火狐中晃动图像的错误报告。
当我将background-image样式移到单个选择器上时，振动似乎停止：See Demo
例子：

// Vibrates
.a, .b {background-image: url(example.png); background-size:50%;}

// Doesn't Vibrate
.a, .b {background-size:50%;}
.a {background-image: url(example.png);}
.b {background-image: url(example.png);}

在调整精灵大小时，我对firefox中的背景图像振动也有同样的问题。将background-image添加到每个指令后，问题就消失了，因此修复不仅限于您的演示。
就我个人而言，我开始怀疑这种调整精灵大小的方法。我是作为视网膜设备的一个解决方案来做的，但是看起来代码很难维护，精灵也不那么精确（因为不是所有的浏览器都支持像素的一小部分）。最终结果是：
firefox中的振动错误和需要的解决方法
background-position值刚好足够以奇怪的方式切断图像
需要一个将所有值乘以50%的解决方案，这意味着我不能只复制和粘贴sprite生成器生成的代码。