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

发布于 2024-12-09 16:38:59 字数 972 浏览 1 评论 0原文

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

这就是它在 Chrome 中的样子

然而，在 Internet Explorer 8 中，不是平铺 1x1 PNG 图像，而是渐变 (!)显示。

这就是 Internet Explorer 中的样子 8

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/

原文

I have a weird error. I'm tiling a semi-transparent 1x1 pixel yellow PNG image in a DIV that overlays some text. With normal browsers, everything looks like it should. There's some text and a yellow, semi-transparent overlay above it.

This is how it looks in Chrome

In Internet Explorer 8 however, instead of tiling the 1x1 PNG image, a gradient (!) is displayed.

This is how it looks in Internet Explorer 8

The CSS is rather simple:

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

I've never seen a bug like this before and Google doesn't help me…

Here's a demo in jsFiddle, http://jsfiddle.net/jUVfS/

分享到QQ

分享到微博