web-dev-qa-db-fra.com

Correctif IE8 pour la propriété de taille d'arrière-plan? Image de la rétine

J'utilise le CSS suivant pour les images Retina et cela fonctionne parfaitement dans FF, Chrome, Safari mais pas dans IE.

Existe-t-il un correctif pour IE pour l'utilisation de la taille d'arrière-plan - et si oui, comment pourrais-je l'implémenter en utilisant mon code actuel?

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>

Quelqu'un peut-il expliquer comment je corrige cela pour IE?

Un grand merci pour toute aide :-)

cssinternet-explorer-8backgroundretina-display
14
michaelmcgurk

IE8 et inférieur simplement ne supporte pas background-size vous devrez donc soit utiliser le AlphaImageLoader Filter qui est pris en charge depuis 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')";
}

Ou utilisez une méthode de ciblage IE versions via CSS pour appliquer une alternative à votre arrière-plan pour IE8 et les utilisateurs inférieurs.

Il convient également de noter, comme le souligne Matt McDonald , que vous pouvez voir deux images suite à l'utilisation de cette technique. Cela est dû au filtre IE ajoutant une image d'arrière-plan en plus, au lieu de remplacer, l'image d'arrière-plan standard. Pour résoudre ce problème, ciblez IE via css en utilisant votre méthode préférée ( voici une méthode, mon préféré ) et supprimez la norme background-image pour IE8 et versions antérieures.

En utilisant la première technique de Paul Irish's blog post pour ce faire, vous pouvez utiliser ce qui suit:

.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;
}
39
Josh Davenport