IE8 solución para la propiedad de tamaño de fondo? Retina Image

Question

Estoy usando el siguiente CSS para imágenes Retina y funciona perfectamente en FF, Chrome, Safari pero no en.

¿Existe una solución para IE para usar el fondo de pantalla? En caso afirmativo, ¿cómo podría implementarlo utilizando mi código actual?

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> 

Puede alguien explicar cómo puedo solucionar este problema para el IE?

Muchas gracias por cualquier ayuda :-)

Answer 1

IE8 y por debajo don't support background-size simplemente por lo que está bien va a tener que utilizar el AlphaImageLoader Filter que ha sido apoyado desde 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')"; 
} 

O utilice algún método de targeting IE versions via CSS para aplicar una alternativa a su fondo para IE8 y usuarios inferiores.

También vale la pena señalar, as Matt McDonald points out, que puede ver dos imágenes como resultado del uso de esta técnica. Esto se debe a que el filtro IE agrega una imagen de fondo además de, en lugar de reemplazar, la imagen de fondo estándar. Para resolver esto, meta IE mediante css usando su método preferido (here's a method, my personal favourite) y elimine el estándar background-image para IE8 y versiones inferiores.

Usando la primera técnica de Paul irlandesa de blog post a ello, se puede utilizar la siguiente:

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