#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:
Проблема в том, что 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. Просто сделал … к сожалению, безуспешно