GIF加载程序图像与Firefox中的背景图像不匹配

Question

在Firefox中点击后，我无法在按钮上正确呈现加载程序图像。正如您在下面的2张图片中看到的那样，加载程序在Chrome上正确显示，但它在Firefox上也不起作用 - 加载程序图像没有融入背景，边框清晰可见。 / p>

左侧Chrome浏览器和右侧Firefox浏览器的屏幕截图：

这是我的情况。首先，我需要支持IE 8，这使得所有样式都很成问题。 IE 8不仅不支持多个背景，而且常规按钮背景也是渐变，IE8也不支持线性渐变。最后一个障碍是，可以处理动画的Web浏览器支持的唯一图像格式--GIF - 不支持多级透明度，因此将加载器GIF正确地混合到下面的渐变中真的很麻烦。

我的解决方案是：

• 我从图像渲染渐变，而不是使用线性渐变，这样我就能控制所显示的任何像素（我可以将加载器图像完美地匹配到背景中）。另一个好处是IE 8也显示了渐变。
• 我自己准备了装载机图像，其背景是我用于按钮背景的相同渐变图像（仅从顶部切割7px，因为装载机显示为7px按钮的顶部）。 BTW按钮的高度 31px （包括 1px 边框），按钮背景渐变 1x29px ，加载器图像为< EM> 16x16px
• 当显示加载器图像时，我使用CSS＆＃39;多个背景，作为后备，我为IE 8提供了一个背景颜色（装载机赢得了与背景的完美融合，但如果它能够与之相提并论仅出现在IE 8中）

以下是使用的2张图片：背景渐变图案（仅 1px 宽）和装载器。然后是CSS代码。您会注意到我使用 Base64 字符串作为加载程序映像。这需要在点击后立即加载图像。

.button-blue,
.button-grey {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  height: 31px !important;
  width: auto !important;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
  font-size: 13.0px !important;       /* IE 8 fallback */
  font-size: 1.08333rem !important;   /* Other browsers */
  font-weight: bold;
  text-align: center;
  text-shadow: none;
}

.button-grey {
  padding-left: 15px;
  padding-left: 26px;
  /* IE 8 fallback */
  background-color: #c0e5ea;
  background-image: url(images/arrows/blue-left.png);
  background-repeat: no-repeat;
  background-position: 14px center;
  /* Other browsers *
   * The arrow is irrevelant, as it's displayed only before the button is clicked */
  background: url(images/arrows/blue-left.png) 14px center no-repeat,
              url(images/button-grey-background-regular.png) 0 0 repeat;

/* Displays the loader image after the button is clicked */
.button-grey.button-grey-clicked {
  /* IE 8 fallback */
  background-color: #c0e5ea;
  background: url("data:image/gif;base64,R0lGODlhEAAQAOf8ALLf5bPf5bTf5rLg5bLg5rbf5rPg5bPg5rTg…NOnb12kRBwoIFU3pNcuBl2rQyDOJY0nH6gO0FBg6YadbMjO0Etg8AGE48Qp8/EYgTDwgAOw==") center 7px no-repeat;
  /* Other browsers */
  background: url("data:image/gif;base64,R0lGODlhEAAQAOf8ALLf5bPf5bTf5rLg5bLg5rbf5rPg5bPg5rTg…NOnb12kRBwoIFU3pNcuBl2rQyDOJY0nH6gO0FBg6YadbMjO0Etg8AGE48Qp8/EYgTDwgAOw==") center 7px no-repeat,
              url(images/button-grey-background-regular.png) 0 0 repeat;
  color: #c0e5ea;            /* IE 8 fallback */
  color: rgba(0, 0, 0, 0);   /* Other browsers */
}

有没有人知道为什么加载程序图像与Firefox上的背景图像不匹配，当它在Chrome上正确渲染时？