web-dev-qa-db-fra.com

CSS3 transform: scale in IE

Je voudrais utiliser la propriété CSS3 transform: scale.

div
{
     transform: scale(0.5,0.5);
}

Existe-t-il un moyen d’imiter cela dans Internet Explorer 8 et versions ultérieures? Peut-être quelque chose avec filter ou une solution Javascript?

J'ai cherché sur le Web sans aucun résultat.

Merci beaucoup, Vincent

cssinternet-explorercss3scale
18
Vinzcent

IE9 prend en charge la transformation:

-ms-transform: scale(0.5,0.5);

Pour les autres versions d'IE, il existe une syntaxe complexe. Quelque chose comme ça:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=1.5320888862379554, M12=-1.2855752193730787,
    M21=1.2855752193730796, M22=1.5320888862379558);

Regardez ici pour plus d'informations.

33
Pedram Behroozi

Non, IE8 et les versions antérieures ne prennent pas en charge le style transform standard. IE9 le supporte cependant.

Il existe des solutions que vous pouvez utiliser avec le style filter, mais elles seront compliquées.

Mais pour le cas simple que vous décrivez dans la question (essentiellement une réduction simple), vous pouvez utiliser la propriété zoom de propriété exclusive d'IE.

Comme il est non standard, l'utilisation la plus courante de zoom est withzoom:1, qui est utilisée pour corriger un certain nombre de problèmes de mise en page dans IE (notamment dans IE6 et IE7). Mais il effectue également un zoom réel et vous pouvez utiliser zoom:0.5 pour obtenir l'effet que vous recherchez.

La bonne chose à propos de l'utilisation de zoom est que cela fonctionne dans IE comme n'importe quelle autre propriété CSS normale (l'alternative filter présente des problèmes de rendu importants que vous devez connaître).

Le seul inconvénient de l'utilisation de zoom est que vous devez le désactiver dans IE9 ou une version ultérieure, sinon cela interagirait avec votre style transform et aurait des effets indésirables. Je ne suis pas du genre à accepter en général l’utilisation des hacks CSS, mais vous pouvez utiliser le hack /9 ( documenté ici ) pour qu’il ne concerne que IE8 et les versions antérieures, ce qui signifie que vous pouvez spécifier à la fois transform et zoom dans même feuille de style, comme ceci:

div {
  transform: scale(0.5,0.5);
  zoom: 0.5\9;
}

Sinon, vous devrez utiliser des commentaires conditionnels pour déterminer s'il convient de les utiliser.

Évidemment, si vous voulez faire quelque chose de plus complexe qu'une simple échelle proportionnelle, alors zoom ne conviendra pas, mais pour un cas simple comme celui de votre question, il sera parfait.

13
Spudley

http://msdn.Microsoft.com/en-us/library/ms533014(v=vs.85).aspx

bien que les filtres dans IE ne soient pas faciles à utiliser et qu'ils ne soient pas toujours combinés avec d'autres effets css ....

mais IE 9 prend en charge l'échelle https://developer.mozilla.org/en/CSS/transform

1
4esn0k

Essayez ceci: https://github.com/pbakaus/transformie

0
Asinox