Фоновое изображение заголовка не отображается в ie6, ie7 и ie8

#html #css #cross-browser

#HTML #css #кросс-браузерный

Вопрос:

Знаете ли вы, почему фоновое изображение моего заголовка не отображается в ie6, 7 и 8, несмотря на запасной вариант, и как это исправить? Смотрите http://goo.gl/YbW2xb

Большое спасибо

 .wrapper-3 header {
background-image: url('../images/.jpg'); /* fallback */
  background-image: -webkit-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:    -moz-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:      -o-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:     -ms-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-image:         linear-gradient(359deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
  background-position: 0% 0%, center center;
  opacity: 0.95;
}
  

Как это выглядит в ie:

введите описание изображения здесь

Как это должно выглядеть:

введите описание изображения здесь

Ответ №1:

Тест в IE8 Native

Проблема в том, что IE<9 не имеет полной поддержки новых семантических тегов HTML5, поэтому Css не может видеть правила, которые вы передаете им, как вы пытаетесь сделать с тегом «заголовок» (см. Скриншот инспектора IE8). Смотрите здесь для получения полной справки: Поддержка семантических элементов Html5. Используйте полизаполнение «HTML5Shiv», чтобы включить совместимость: посмотрите здесь Html5Shiv, а затем выполните отладку с помощью панели инспектора разработчика (нажмите F12). Для пользовательского Css используйте условные таблицы стилей IE.

Ответ №2:

 background: url('../images/.jpg'); /* hope you set a filename on this :D */
  

в любом случае, вам, вероятно, нужно использовать html5 shim

https://code.google.com/p/html5shiv/

включает поддержку html5 в старых браузерах

Ответ №3:

Попробуйте:

 background: url('../images/.jpg'); /* fallback */
  

Комментарии:

1. Просто сделал … к сожалению, безуспешно