6

次のCSSルールがあります。

  -webkit-transform: scale(0.5);  /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5);  /* FF3.5+ */
      -ms-transform: scale(0.5);  /* IE9 */
       -o-transform: scale(0.5);  /* Opera 10.5+ */
          transform: scale(0.5);

同じ中心を維持しながら、そのすべてのコンテンツ、画像などを含むサイズを 50% に拡大するために、div に適用するつもりです。おそらくご存じのとおり、IE7-8 を除いて、私がリストしたルールはまさにそれを行います。

このサイトによると、同等の MS 独自の規則は次のようになります。

   /* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand')";

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.5,
            M12=0,
            M21=0,
            M22=0.5,
            SizingMethod='auto expand');

ただし、これらは実際には div のコンテンツのサイズを変更しているようには見えず、その位置をシフトしているように見えますが、それだけです。

CSS3Please.comは、さまざまなマトリックス値が scale(0.5) と同等であると報告しています。

filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');

これらもテストしましたが、効果は同じでした。div の位置が変わったように見えますが、内容の実際のサイズは変わりません。

最後に、 transform プロパティを割り当てるとsylvester.jsを介して自動的に行列を計算するtransformie.jsを試しましたが、最終結果は依然として次のとおりでした。

M11=0.5, M12=0, M21=0, M22=0.5

私が最初に試したものとまったく同じで、divの位置をシフトする以外に何もしなかったようです。

私はcssSandpaper.jsを試してみますが、私がやろうとしていることに対してかなり肥大化しているように見えます。さらに、jQuery ポートがなく、そのためだけにプロジェクトに cssQuery を追加したくありません。ただし、sylvester.js も使用しているように見えるため、結果は transformie.js が生成するものと同じになる可能性があります。

編集：マイクロソフトから直接来たと思われるこれも試しましたが、次の行列計算方法を提案しています：

function resizeUsingFilters(obj, flMultiplier) {
    // If you don't do this at least once then you will get an error
    obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";
    // Resize
    obj.filters.item(0).M11 *= flMultiplier;
    obj.filters.item(0).M12 *= flMultiplier;
    obj.filters.item(0).M21 *= flMultiplier;
    obj.filters.item(0).M22 *= flMultiplier;
}

残念ながら、これは div 自体の内容もスケーリングしません。これはまったく不可能のように見えますが、次のようになります。

transform: scale実際に内部の div コンテンツのサイズも変更するように、IE8-7 でモダンをどのようにシミュレートできますか?

存在しないものを探しているのかもしれませんが、確認したかったのです。すべてのテストは、IE8 および IE7 の互換モードで IE9 を使用して行われました (これまでのところ、常に機能しており、信頼性が低いとは思いませんが、そうでない場合は自由に修正してください)。

4

2 に答える 2

4

IEのズームプロパティを使用することもできます。

ズーム：0.5

これはあなたがしたいことをするはずです。

于 2012-08-12T14:44:24.850 に答える
4

私はあなたの説明に少し混乱しています。このIE7-8のフィドルは、投稿した最初のコードセットで内部要素をうまく縮小します（ただし、スケーリングではなく、位置のみを変更していると示しています）。そのコードが実行しない(実行できない) のは、中心点 (左上から) からスケーリングすることであり、行列変換は平行移動に対応できません (オブジェクトのコンテンツをサイズ変更、回転、または反転するだけです)。 ）、したがって、あなたが望むように「同じ中心を保つ」ことではありません。

変換の実行で指摘したtransformie.jsに似たページが見つかりましたが、この別のページは、変換元が中央に配置されているという問題について語っています。最終的に、中央でスケーリングされているように見えるようにするには、 を使用して要素をシフトするための何らかの計算を含める必要がありますposition: relative。

このフィドルwidthでは、ラッピングに a を設定し、内側のサイズに基づいてdivを知ることで、このような計算を手動で簡単に実行できるようにしました。heightこれは動的なサイジングでは複雑になる可能性がありますが、上記のリンクは、sylvester.js で javascript (JQuery) を使用して動的に実行するための計算を提供すると思います。

于 2012-08-06T19:08:18.563 に答える