2011-10-18 12 views
18

私はCSS3のプロパティtransform:scaleを使いたいと思います。CSS3変換:IEのスケール

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

Internet Explorer 8以下でこれを模倣する方法はありますか? filterまたはJavascriptソリューションのあるものがありますか?

私は結果を出すことなくウェブを検索しました。

どうもありがとう

、ヴィンセント

+5

このような質問をして、あなたがについて尋ねているIEのバージョン(複数可)を指定してください。 – Spudley

答えて

32

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); 

詳細をご覧ください。

+7

また、[CSS3 Transform to Matrix converter](http://www.useragentman.com/IETransformsTranslator/)を試して、IEの形式に変換することもできます。 – thirdender

+1

-ms-transform:scale(0.5);一定のズームのIE9のために十分でなければなりません。 – Kozuch

13

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

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

しかし、あなたが質問で説明している単純なケース(基本的に単純な縮小)では、IE独自のzoomプロパティを使用できます。

zoomの最も一般的な使用方法はzoom:1で、これはIEのレイアウトの不具合(特にIE6とIE7の不具合)を修正するために使用されます。実際のズームも同様に行います。zoom:0.5を使用すると、探している効果を得ることができます。

zoomを使用することの良い点は、他の通常のCSSプロパティ(IEのfilterには知っておく必要がある重大なレンダリングの特徴があります)のようにIEで動作することです。

zoomを使用する唯一の欠点は、IE9以降で無効にする必要があることです。それ以外の場合は、transformスタイルに邪魔され、望ましくない影響があります。私はCSS Hacksの使用を一般的にサポートする人ではありませんが、ハック(documented here)を使用するとIE8以前のバージョンにしか影響しません。つまり、同じスタイルシートにtransformzoomの両方を指定できます。 :

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

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

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

+0

あなたの興味深い返答をありがとう。不幸にもズームはテキストのみを拡大縮小するように見えます。私のdivの次元ではありません。 – Vinzcent

+0

はい、私はそれが 'zoom'が適しているかどうかに関してあなたが実際に達成する必要があるものに依存すると思います。 – Spudley

+0

/9ハックチップをありがとう。私はIE8をカバーするために同じスタイルをズームアップしていたので、IE9と10で奇妙な動作をしていました。 – dex3703

関連する問題