Internet Explorer 8显示渐变而不是背景图像

Question

我有一个奇怪的错误.我在一个覆盖一些文本的DIV中平铺一个半透明的1x1像素黄色PNG图像.使用普通的浏览器,一切看起来都应该如此.上面有一些文字和黄色,半透明的覆盖层.

但是,在Internet Explorer 8中,不显示1x1 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;
}

我以前从未见过像这样的bug,Google也没有帮助我......

这是jsFiddle中的一个演示,http://jsfiddle.net/jUVfS/

Answer 1

您的.png图片需要具有更大的尺寸,至少应该 1x2是1x1.

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

当页面上的任何其他元素使用"-ms-filter"drective作为Alpha透明度时,Internet Explorer 8不会正确执行1x1像素半透明背景图像的重复.