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

Question

J'ai essayé d'ajouter une taille d'arrière-plan à Internet Explorer, 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;
}
 

Qu'est-ce qui ne va pas avec le filtre ?

Answer 1

Posté par " Dan " dans un fil similaire, il est possible de fixer, si vous n'êtes pas à l'aide d'un sprite:

faire de fond de taille de travail 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, cette échelle de l'ensemble de l'image pour l'ajuster à la zone allouée. Donc si votre utilisation d'un sprite, cela pourrait provoquer des problèmes.

Attention
Le filtre a un défaut, tous les liens à l'intérieur de la zone allouée ne sont plus cliquables.

Answer 2

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

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

 $("h2#news").css({backgroundSize: "cover"});
 

Answer 3

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

Answer 4

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

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

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

Answer 5

Comme indiqué par @RSK IE8 ne supporte pas la taille d'arrière-plan. Pour trouver un moyen de résoudre ce problème, j'ai utilisé des hacks 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;
}
 

Grâce à cela, j'ai pu changer mon image de logo en une image laide. Mais le résultat final est bon. Je vous suggère d'essayer quelque chose comme ça.