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;
}

我以前从未见过这样的错误，Google也没有帮助我......

以下是jsFiddle，http://jsfiddle.net/jUVfS/

中的演示

Answer 1

您的.png图片需要包含更大的尺寸，最小 1x2而不是1x1。

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

  

Internet Explorer 8无法执行   重复1x1像素   半透明背景图像   当任何其他元素开启时正确   该页面使用的是“-ms-filter”   为alpha透明度做好准备。