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

时间:2014-11-24 14:47:48

标签: css css3 firefox background-image animated-gif

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

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

The button in Chrome The button in 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 background gradient Loader image

.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上正确渲染时?

0 个答案:

没有答案