我有一个奇怪的错误。我在一个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('../../images/content/edit/section/overlay/background-color.png') repeat; min-height: 34px; cursor: move; }
我从来没有见过这样的错误,谷歌不帮我…
这里是一个演示在jsFiddle,http://jsfiddle.net/jUVfS/
解决方法
您的.png图片需要具有较大的尺寸,至少为1×2,而不是1×1。
参见:http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
Internet Explorer 8 doesn’t perform the repeat of a 1×1 pixel semi-transparent background image correctly when any other element on the page is using the “-ms-filter” drective for the alpha transparency.