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

Question

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

但是，在 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 doesn't perform the repeat of a 1x1 pixel semi-transparent background image correctly when any other element on the page is using the "-ms-filter" drective for the alpha transparency.