web-dev-qa-db-ja.com

CSS3 transform：scale in IE

CSS3プロパティtransform：scaleを使用したいと思います。

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

Internet Explorer 8以前でこれを模倣する方法はありますか？ filterまたはJavaScriptソリューションを使用している場合がありますか？

結果なしでウェブを検索しました。

どうもありがとう、ヴィンセント

cssinternet-explorercss3scale
18
Vinzcent

IE9は変換をサポートしています：

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

IEの他のバージョンには、複雑な構文があります。このようなもの：

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

詳細は here をご覧ください。

33
Pedram Behroozi

いいえ、IE8以前は標準のtransformスタイルをサポートしていません。 IE9はサポートしています。

filterスタイルを使用して試すことができる解決策がありますが、それらは面倒です。

ただし、質問で説明している単純なケース（基本的には単純なスケールダウン）には、IE独自のzoomプロパティを使用できます。

非標準なので、zoomの最も一般的な使用はwithzoom:1。これは、IEの多くのレイアウトの不具合を修正するために使用されます（特にIE6およびIE7で）。しかし、実際のズームも行うので、zoom:0.5探している効果を実現します。

zoomを使用することの良い点は、他の通常のCSSプロパティと同様に、IEで動作することです（filter代替には、知るために）。

zoomを使用する場合の唯一の欠点は、IE9以降で無効にする必要があることです。そうしないと、transformスタイルと干渉し、望ましくない効果が生じます。私は一般的にCSSハックの使用をサポートする人ではありませんが、/9ハック（ ここに記載 ）IE8以前のみに影響を与えるため、同じスタイルシートでtransformとzoomの両方を指定できます。 ：

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

それ以外の場合は、条件付きコメントを使用して、使用するかどうかを決定する必要があります。

単純な比例スケールよりも複雑な処理を行う場合は、明らかにzoomは適切ではありませんが、質問のような単純な場合には完璧です。

13
Spudley

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

ただし、IEのフィルターは使用が簡単ではなく、他のCSS効果と常に組み合わせられるわけではありません。

しかしIE 9サポートスケール https://developer.mozilla.org/en/CSS/transform

1
4esn0k

これを試してください： https://github.com/pbakaus/transformie

0
Asinox