Исправление IE8 для свойства фона? Изображение Retina

Я использую следующие CSS для изображений Retina, и он отлично работает в FF, Chrome, Safari, но не в IE.

Есть ли исправление для IE для использования фонового размера - и если да, то как я мог реализовать его с помощью моего текущего кода?

CSS

.arrow-big-right {
    display: block;
    width: 42px;
    height: 48px;
    margin-bottom: 1.8em;
    background-image: url(arrow-big-right.png);
    background-repeat: no-repeat;
    background-size: 42px 48px;
}

HTML

<div class="arrow-big-right"></div>

Может кто-нибудь объяснить, как я исправляю это для IE?

Большое спасибо за любую помощь: -)

Ответы

Ответ 1

IE8 и ниже просто не поддерживают background-size, поэтому вам придется либо использовать AlphaImageLoader Filter, который поддерживается с IE5.5:

.arrow-big-right {
    display: block;
    width: 42px;
    height: 48px;
    margin-bottom: 1.8em;
    background-image: url(arrow-big-right.png);
    background-repeat: no-repeat;
    background-size: 42px 48px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}

Или используйте какой-либо метод таргетинг версий IE через CSS, чтобы применить альтернативу вашему фону для IE8 и ниже пользователей.

Также стоит отметить, как указывает Мэтт Макдональд, что вы можете увидеть два изображения в результате использования этой техники. Это вызвано тем, что фильтр IE добавляет фоновое изображение вместо стандартного фонового изображения вместо замены стандартного фонового изображения. Чтобы решить эту проблему, укажите IE через css, используя ваш предпочтительный метод (здесь метод, мой личный фаворит) и удалите стандартный background-image для IE8 и ниже.

Используя первый метод из Paul Irish сообщение в блоге, вы можете использовать следующее:

.arrow-big-right {
    display: block;
    width: 42px;
    height: 48px;
    margin-bottom: 1.8em;
    background-image: url(arrow-big-right.png);
    background-repeat: no-repeat;
    background-size: 42px 48px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}

.ie6 .arrow-big-right, 
.ie7 .arrow-big-right, 
.ie8 .arrow-big-right {
    background-image: none;
}