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

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

This is how it looks in Chrome

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

This is how it looks in 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/

Ответ 1

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

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

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