IE 8: исправление фона

Я попытался добавить размер фона в IE, но он вообще не работает:

HTML

<h2 id="news">Notícias <img src="white-marker.png" alt="" /></h2>

CSS

div#content h2#news {
    background: url('../images/news-background.jpg') no-repeat;
    background-size: 100%;
    border-radius: 20px;
    color: #fff;
    margin: 20px 0 0 20px;
    padding: 8px 20px;
    width: 90%;
    -moz-background-size: 100%;
    -moz-border-radius: 20px;
    -webkit-background-size: 100%;
    -webkit-border-radius: 20px;
}

Что случилось с фильтром

ОТВЕТЫ

Ответ 1

Как отправил "Дэн" в аналогичный поток, существует возможное исправление, если вы не используете спрайт:

Как создать фоновый размер в IE?

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

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

Внимание
Фильтр имеет дефект, любые ссылки внутри выделенной области больше не доступны для кликов.

Ответ 2

Я создал jquery.backgroundSize.js: плагин jQuery 1.5K, который можно использовать в качестве резервной копии IE8 для значений "обложка" и "содержать", Посмотрите demo.

Решение вашей проблемы может быть простым:

$("h2#news").css({backgroundSize: "cover"});

Ответ 3

Также я нашел еще одну полезную ссылку. Это фоновый взлом, используемый таким образом

.selector { background-size: cover; -ms-behavior: url(/backgroundsize.min.htc); }

https://github.com/louisremi/background-size-polyfill

Ответ 4

Я использую решение фильтра выше, для ie8. Однако.. Чтобы решить проблему замораживания ссылок, сделайте также следующее:

background: no-repeat center center fixed\0/; /* IE8 HACK */

Это решило проблему замороженных ссылок для меня.

Ответ 5

Как указано @RSK IE8 не поддерживает фоновый размер. Чтобы понять способ справиться с этим, я использовал некоторые IE-хаки, как показано здесь:

//IE8.0 Hack!
@media \0screen {
    .brand {
        background-image: url("./images/logo1.png");
        margin-top: 8px;
    }

    .navbar .brand {
        margin-left: -2px;
        padding-bottom: 2px;
    }
}

//IE7.0 Hack!
*+html .brand {
    background-image: url("./images/logo1.png");
    margin-top: 8px;
}

*+html .navbar .brand {
    margin-left: -2px;
    padding-bottom: 2px;
}

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