Фоновое изображение не отображается на IE8

Question

Я прочитал другие вопросы, но безрезультатно - я действительно не могу решить это.

Сайт (был переработан, поэтому больше не актуален. Он использовал элементы HTML5, но они не были объявлены как блоки, и IE не предполагает, что они должны быть.)

Градиент нижнего колонтитула отлично смотрится в браузерах, отличных от IE, но не отображается в IE 7,8 и в предварительном просмотре IE9.

Есть идеи?

Answer 1

Вы можете попробовать добавить это в CSS нижнего колонтитула (в дополнение к существующим стилям нижнего колонтитула).

footer
{    
    display:block;
}

Это исправило это для меня в FF3.6, и я предполагаю, что исправит это и в IE. Стиль отображения по умолчанию для <footer> - inline, что не очень хорошо работает с фонами независимо от браузера. Применение блока к нему будет воспринимать его как div.

Вы также захотите соблюдать осторожность при использовании HTML 5. Не уверен, насколько хорошо он поддерживается во всех браузерах. Возможно, вы захотите рассмотреть <div id="footer"><!-- contents of footer --></div> и применить к нему стили по id в CSS вместо этого.

Answer 2

У меня была похожая проблема, но, наконец, я нашел решение.

Измените формат изображения на png.

И отлично работает в IE8.

Answer 3

Если я посмотрю на нижний колонтитул с помощью панели инструментов разработчика IE 8, я получу это как определение background-image:

 url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000); TEXT-ALIGN: center

Обратите внимание на часть справа. Я не уверен, откуда это - это не в таблице стилей. Возможно лист как-то искажен. Если я удаляю часть выравнивания текста, изображение нижнего колонтитула отображается нормально. То же самое происходит с вашим body определением.

Answer 4

Это работает:

#footer_text { 
  background: url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000) repeat-x scroll top left; 
}

Я бы сейчас осторожно применил любой стиль к элементам html5, таким как нижний колонтитул Они не очень хорошо поддерживаются всеми браузерами.

Вы можете использовать их по смысловым причинам.

Answer 5

попробуйте открыть файл в Photoshop или аналогичном и сделать чистое сохранение для веб-файла в формате PNG.