css – Internet Explorer 8显示渐变而不是背景图片

前端之家收集整理的这篇文章主要介绍了css – Internet Explorer 8显示渐变而不是背景图片前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个奇怪的错误。我在一个DIV覆盖一些文本,平铺一个半透明1×1像素黄色 PNG图像。使用正常的浏览器,一切看起来像它应该。有一些文本和上面的一个黄色,半透明的覆盖。

在Internet Explorer 8中,不是平铺1×1 PNG图像,而是显示渐变(!)。

CSS很简单:

.edit_section_overlay {
  position: absolute;
  z-index: 150;

  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;

  border: 1px solid #afad9d;
  background: url('../../images/content/edit/section/overlay/background-color.png') repeat;

  min-height: 34px;
  cursor: move;
}

我从来没有见过这样的错误,谷歌不帮我…

这里是一个演示在jsFiddlehttp://jsfiddle.net/jUVfS/

解决方法

您的.png图片需要具有较大的尺寸,至少为1×2,而不是1×1。

参见:http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/

Internet Explorer 8 doesn’t perform the repeat of a 1×1 pixel semi-transparent background image correctly when any other element on the page is using the “-ms-filter” drective for the alpha transparency.

猜你在找的CSS相关文章