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

【问题标题】：Internet Explorer 8 shows gradient instead of background imageInternet Explorer 8 显示渐变而不是背景图像
【发布时间】：2011-12-07 13:30:38
【问题描述】：

我有一个奇怪的错误。我在覆盖一些文本的 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/ 中的演示

【问题讨论】：

您能给我们一个演示站点的链接吗？为什么你首先使用半透明背景 image 而不是半透明背景 color？
100% 确定您没有使用任何 IE 特定的 css？很奇怪的效果
@phihag 这是 JSFiddle 上的演示：jsfiddle.net/jUVfS（我使用的是 IE8.0.7600.16385）
@Alex 绝对没有 IE 特定的东西，查看 JSFiddle：jsfiddle.net/jUVfS

标签： css internet-explorer internet-explorer-8

【解决方案1】：

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

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

Internet Explorer 8 无法运行 1x1 像素的重复半透明背景图片正确当任何其他元素该页面正在使用“-ms-filter” alpha 透明度的指令。

【讨论】：

我很惊讶没有更多的人来这里并投票赞成这个问题并回答，因为它是如此普遍！ +1