Internet Explorer 8 показывает градиент вместо фонового изображения

Question

Internet Explorer 8 показывает градиент вместо фонового изображения

У меня странная ошибка. Я делаю полупрозрачное изображение PNG желтого цвета размером 1x1 в DIV, которое перекрывает некоторый текст. В обычных браузерах все выглядит так, как должно. Над ним есть текст и желтое полупрозрачное наложение.

Вот так это выглядит в Chrome

Однако в Internet Explorer 8 вместо мозаичного изображения PNG 1x1 отображается градиент (!).

Вот как это выглядит в 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/

35

css internet-explorer internet-explorer-8

Источник

user1183252 14 окт '11 в 08:05

1 ответ

Решение

Другие вопросы по тегам css internet-explorer internet-explorer-8

user405015 14 окт '11 в 08:43 2011-10-14 08:43 · Accepted Answer · 2011-10-14 08:43

Ваш .png изображение должно иметь как минимум большие размеры1x2 вместо 1x1,

Смотрите: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/

Internet Explorer 8 неправильно выполняет повторение полупрозрачного фонового изображения размером 1x1 пикселя, когда любой другой элемент на странице использует указание "-ms-filter" для прозрачности альфа.