Comment puis-je faire du travail en arrière-plan dans IE?

Question

Existe-t-il un moyen connu de faire en sorte que le style CSS background-size fonctionne dans IE?

Answer 1

Un peu en retard, mais cela pourrait aussi être utile. Il existe un filtre IE, pour IE 5.5+, que vous pouvez appliquer:

 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 met à l'échelle l'image entière pour tenir dans la zone allouée, donc si vous utilisez un sprite, cela peut causer des problèmes.

Spécification: AlphaImageLoader Filter @microsoft

Answer 2

J'ai créé jquery.backgroundSize.js : un plugin jQuery 1.5K qui peut être utilisé comme repli IE8 pour les valeurs "cover" et "contain". Jetez un oeil à la démo .

Answer 3

Grâce à ce post, mon css complet pour le bonheur du navigateur est:

 <style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>
 

Answer 4

Même plus tard, mais cela pourrait être utile aussi. Il y a jQuery backstretch-plugin que vous pouvez utiliser comme un polyfill pour background-size: cover. J'imagine que ça doit être possible (et assez simple) pour attraper les feuilles de style css background-propriété de l'url avec jQuery et le nourrir à la jQuery-backstretch plugin. Une bonne pratique serait de tester pour le fond de la taille du support avec modernizr et de l'utilisation de ce plugin comme une solution de repli.

Le backstretch-plugin a été mentionné sur DONC ici.Le jQuery-backstretch-plugin-site est ici.

De la même manière, vous pourriez faire un jQuery-plugin ou un script qui fait le fond de la taille d'un travail dans votre situation (background-size: 100%) et IE8-. Donc, pour répondre à votre question: Oui, il y a un chemin, mais l'atm, il n'y a pas de plug-and-play " (c'est à dire que vous avez à faire un peu de codage de même).

(disclaimer: je n'ai pas examiner la backstretch-plugin à fond, mais il semble faire la même chose que background-size: cover)

Answer 5

Il y a une bonne polyfill: louisremi/background-size-polyfill

Pour citer la documentation:

Télécharger backgroundsize.min.htc à votre site web, avec la .htaccess qui va envoyer le mime-type requis par IE (Apache ne - il est construit dans nginx, nœud et IIS).

Partout où vous utilisez fond de taille dans votre CSS, ajouter une référence à ce fichier.

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}