2

IE >= 7 を含むすべてのブラウザーで iframe のコンテンツをスケーリングしようとしていますが、9 未満では機能しません。

この投稿のコードを、必要と思われるサイズに合わせて変更し、その中に標準の幅 960 ピクセルのページを配置します。 iframe のコンテンツをスケーリングするにはどうすればよいですか?

http://www.carsonfarmer.com/2012/08/cross-browser-iframe-scaling/

        #wrap {
            width: 410px;
            height: 426px;
            padding: 0;
            overflow: hidden;
            border:1px solid #ccc;
            box-shadow: 0px 0px 3px #333;
        }
        #frame {
            -ms-zoom: 0.5;
            -ms-transform-origin: 0 0;
            -moz-transform: scale(0.5);
            -moz-transform-origin: 0px 50px;
            -o-transform: scale(0.5);
            -o-transform-origin: 0px 50px;
            -webkit-transform: scale(0.5);
            -webkit-transform-origin: 0 0;
        }
        #frame {
            width: 950px;
            height: 1000px;
            border: 0;
            overflow: hidden;
        }

IE 8 では、コンテナーに対してコンテンツが小さすぎて、スクロールバーが表示されます。IE 7 では、コンテンツはスケーリングされません。

http://jsfiddle.net/t2GPm/

4

1 に答える 1

1

IE7 がまったくスケーリングしない理由についての質問に答えることができます。

-ms-zoom: 0.5;

上記の行は IE8 では機能しますが、IE7 では機能しません。IE7 は-ms-プレフィックスを認識しないためです。プレフィックス スタイルは IE8 でのみ導入されました。

zoomスタイルのプレフィックスなしのバージョンを指定することで、IE7 でこれを修正できます。zoomただし、 Chrome と Safari でもサポートされているため、これは完全な答えではありません。これらのブラウザーで使用しているので、おそらくこれらのブラウザーでは使用したくないでしょうtransform。

はい、複雑な問題です。上記を踏まえると、条件付きコメントを使用してzoomプロパティを IE 固有のものにすることが最善の方法です (これを実現するにはさまざまな方法があります)。

もちろん、もう 1 つのオプションは、IE7 のサポートをやめることです。率直に言って、これは悪い考えではありません。多くの大きな問題があり、ユーザー数が急速に減少しています。(私が最近見たすべての統計によると、現在は IE6 よりもユーザーが少なくなっています)

より一般的には、zoomを使用したスケーリングと同じではないことを知っておくことが重要transformです。zoom要素を実際にスケーリングしません。ズームします。違いは微妙ですが、特にボックスの周りの要素のレイアウトがズーム/スケーリングされていることに関連して違いがあり、IE8で発生しているスクロールバーの問題を説明している可能性があります.

このため、zoom実際にはやりたいことではないかもしれません。古い IE バージョンは をサポートしていないため、これを使用していtransformますが、古い IE バージョンを取得して要素をスケーリングする方法は他にもあります。1 つのオプションは、独自のfilterスタイルを使用することです。きれいではありませんが、あなたがやろうとしていることにより適しているかもしれません。これを試して：

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

（上記のコードはhereから取得）

もう 1 つのオプションは、 CSS Sandpaper などの Javascript 'polyfill' ライブラリを使用することです。このライブラリを使用すると、標準の CSS 構文をtransformサポートしていない古い IE バージョンで使用できます。内部的には、上記と同じfilterスタイルを使用しますが、標準コードを使用できるようにすることで、CSS をよりきれいにします。

元の質問から少し離れますが、ベンダー接頭辞の話題についている間、transformスタイルの接頭辞なしのバージョンも指定していないことに注意してください。接頭辞付きのスタイルを使用する場合は、標準に完全に準拠したブラウザで選択できるように、接頭辞なしのバリアントも指定することが重要です。これは、以前に接頭辞を使用していたブラウザが、標準が十分に確立されると接頭辞のサポートを終了する可能性があるためです。

必要なバージョンのサポートによっては、プレフィックス付きの属性の一部を実際に削除できる場合があります。Firefox では、変換のためにバージョン 16 以降必要ありません。この種の詳細については、CanIUse.comを参照してください。

それが役立つことを願っています。

于 2013-07-01T21:30:03.590 に答える