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('../..http://img.dovov.comcontent/edit/section/overlay/background-color.png') repeat; min-height: 34px; cursor: move; } 

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

这里是jsFiddle的演示， http：//jsfiddle.net/jUVfS/

Answer 1

你的.png图片需要有更大的尺寸， 至less 1x2而不是1x1 。

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

当页面上的任何其他元素使用alpha透明度的“-ms-filter”drective时，Internet Explorer 8不会正确执行1×1像素半透明背景图像的重复。