IE8 Fix für Hintergrundgröße Eigenschaft? Retina Image

Question

Ich verwende das folgende CSS für Retina-Bilder und es funktioniert perfekt in FF, Chrome, Safari aber nicht in IE.

Gibt es eine Korrektur für IE zur Verwendung der Hintergrundgröße - und wenn ja, wie könnte ich sie mit meinem aktuellen Code implementieren?

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> 

Kann jemand erklären, wie ich dieses Problem beheben für IE?

Vielen Dank für jede Hilfe :-)

Answer 1

IE8 und unten einfach don't support background-size so wirst du entweder die AlphaImageLoader Filter verwenden, die seit IE5.5 unterstützt wurde:

.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 Verwenden Sie eine Methode von targeting IE versions via CSS, um eine Alternative zu Ihrem Hintergrund für IE8 und darunter Benutzer anzuwenden.

Es ist auch erwähnenswert, as Matt McDonald points out, dass Sie zwei Bilder als Ergebnis der Verwendung dieser Technik sehen können. Dies wird dadurch verursacht, dass der IE-Filter ein Hintergrundbild hinzufügt, anstatt das Standard-Hintergrundbild zu ersetzen. Um dies zu beheben, zielen Sie IE über CSS mit Ihrer bevorzugten Methode (here's a method, my personal favourite) und entfernen Sie den Standard background-image für IE8 und darunter.

Unter Verwendung der ersten Technik von Paul Irish des blog post, dies zu tun, könnten Sie die folgende verwenden:

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