Poprawka IE8 dla właściwości o wielkości tła? Retina Image

Question

Korzystam z następujących plików CSS dla obrazów Retina i działa idealnie w FF, Chrome, Safari, ale nie w IE.

Czy istnieje poprawka dla IE w przypadku używania wielkości tła - a jeśli tak, to w jaki sposób mogę ją zaimplementować przy użyciu mojego obecnego kodu?

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> 

Może ktoś wyjaśnić, jak to naprawić dla IE?

Wielkie dzięki za pomoc :-)

Answer 1

IE8 i dalej po prostu don't support background-size więc jesteś albo będzie musiał użyć AlphaImageLoader Filter które były wspierane od 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')"; 
} 

Or użyj jakiejś metody z targeting IE versions via CSS, aby zastosować alternatywę dla swojego tła dla IE8 i użytkowników poniżej.

Warto również zauważyć, as Matt McDonald points out, że możesz zobaczyć dwa obrazy w wyniku użycia tej techniki. Jest to spowodowane przez filtr IE dodający obraz tła oprócz, zamiast zastępowania, standardowego obrazu tła. Aby rozwiązać ten problem, wybierz docelowy IE za pomocą css, używając preferowanej metody (here's a method, my personal favourite) i usuń standard background-image dla IE8 i poniżej.

Stosując technikę pierwszy od Pawła irlandzkiego blog post to zrobić, można użyć następujących:

.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; 
}