web-dev-qa-db-fra.com

IE 8: correction de la taille de l'arrière-plan

J'ai essayé d'ajouter une taille de fond à IE mais cela ne fonctionne pas du tout:

HTML

<h2 id="news">Notícias <img src="white-marker.png" alt="" /></h2>

CSS:

div#content h2#news {
    background: url('../images/news-background.jpg') no-repeat;
    background-size: 100%;
    border-radius: 20px;
    color: #fff;
    margin: 20px 0 0 20px;
    padding: 8px 20px;
    width: 90%;
    -moz-background-size: 100%;
    -moz-border-radius: 20px;
    -webkit-background-size: 100%;
    -webkit-border-radius: 20px;
}

Quel est le problème avec le filtre ?

cssxhtmlfilterwidthbackground-image
138
Thomas

Tel que posté par 'Dan' dans un fil de discussion similaire, il existe une solution possible si vous n'utilisez pas un Sprite:

Comment faire pour que la taille de l’arrière-plan fonctionne dans IE?

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

Cependant, cela redimensionne l’ensemble de l’image pour s’adapter à la zone attribuée. Donc, si vous utilisez un Sprite, cela peut causer des problèmes.

Attention
Le filtre a une faille, les liens à l'intérieur de la zone attribuée ne sont plus cliquables.

147
Sotkra

J'ai créé jquery.backgroundSize.js : un plugin de 1.5K jquery pouvant être utilisé comme solution de secours IE8 pour les valeurs "cover" et "contain". Regardez la démo .

Résoudre votre problème pourrait être aussi simple que:

$("h2#news").css({backgroundSize: "cover"});
89
Louis-Rémi

J'ai aussi trouvé un autre lien utile. C'est un hack de fond utilisé comme ça

.selector { background-size: cover; -ms-behavior: url(/backgroundsize.min.htc); }

https://github.com/louisremi/background-size-polyfill

20
Muhammad Ahsan

J'utilise la solution de filtrage ci-dessus, pour ie8. Cependant .. Pour résoudre le problème des liaisons de congélation, procédez également comme suit:

background: no-repeat center center fixed\0/; /* IE8 HACK */

Cela a résolu le problème des liens gelés pour moi.

12
user890332

Comme l'a souligné @RSK, IE8 ne prend pas en charge la taille de l'arrière-plan. Pour trouver une solution à ce problème, j’ai utilisé des piratages spécifiques à IE, comme indiqué ici:

//IE8.0 Hack!
@media \0screen {
    .brand {
        background-image: url("./images/logo1.png");
        margin-top: 8px;
    }

    .navbar .brand {
        margin-left: -2px;
        padding-bottom: 2px;
    }
}

//IE7.0 Hack!
*+html .brand {
    background-image: url("./images/logo1.png");
    margin-top: 8px;
}

*+html .navbar .brand {
    margin-left: -2px;
    padding-bottom: 2px;
}

En utilisant cela, j'ai été capable de changer l'image de mon logo en une image résidante laide. Mais le résultat final est correct. Je vous suggère d'essayer quelque chose comme ça.

4
Custodio