1

クロスブラウザーの css ズームを機能させようとしていますが、ここで見つけたものはすべて機能しません。

ここに私が持っているものがあります:

HTML

<div id="themeframe">
<div class="themeframe-overlay"></div>
<iframe src="/index.php"></iframe>
</div>

CSS

#themeframe{
position:relative;
width:520px;
height:400px;
margin-top: 20px;
border: none;
overflow: hidden;
}

#themeframe .themeframe-overlay{
position:absolute;
z-index:95;
left:0;top:0;
height:100%;width:100%;
background:#fff;
opacity:0;
filter: alpha(opacity = 0);
}


#themeframe iframe {
width:1040px;
min-height: 800px;
overflow: hidden;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
-ms-transform: scale(0.5);
-ms-transform-origin: 0 0;
margin: 0;
padding:0;
border: none;
}

私は何を達成しようとしていますか？ 520 x 400 の div に、Web ページの 50% 拡大バージョンを入れたいと思っています。上記のように、IE で div/iframe は正しいサイズですが、内部の Web ページは 50% ではなく 100% であるという問題があります。これは、他のすべてのブラウザで機能しています。zoom:0.5; を追加すると、iframe css に追加すると、IE では修正されますが、chrome では壊れます。

これを IE、Chrome、Safari、および Firefox で同時に動作させるのに問題があります。

何かご意見は？

4

1 に答える 1

1

少なくとも私にとってはうまくいった答えを見つけました。この回答の一部は、ここにある手順に従って使用されました。

まず、HTMLを次のように配置します（このサイトでコードを配置するのは苦手です）。

<div id="themeframe">
    <iframe src="/index.php" id="frame" width="794" height="1550"></iframe >
</div>

次に、CSSは次のようになります。

#themeframe {
    overflow: hidden;
    position: relative;
    width:800px;
    height:850px;
    -ms-zoom: 0.75;
}


#frame {
    position: absolute;
    overflow-x: hidden;
    top: -300px;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;

私が指摘する変更は次のとおりです。

  1. と呼ばれるiframeで包んだdivthemeframe

  2. CSSでスタイルを設定できるようにを指定しましiframeた。id

  3. 内にない-ms-zoomのラッピングdivでを使用しました。これは、IEがiframe全体を、その中のコンテンツではなく、設定されたサイズにスケーリングするためです（これは、ChromeとFirefoxが行うことです）。また、CSSで使用することも重要です。これは、Chromeがおかしくなり、両方に注意を払い、区別しない場合に注意を払うためだけではありません。themeframeiframezoom-ms-zoomzoomzoom-webkitms

お役に立てれば。Chrome、FF、IE8で動作します。

于 2012-08-14T19:30:05.183 に答える