3

私のサイトには、この質問から見つかった回答を使用してコンテンツを縮小したiframeブラウザインスタンスがあります。CSSのズームプロパティと変換プロパティを使用しているため、iframeブラウザインスタンスの周囲に余分な空白が含まれていることに気付きました。入力されたiframeとその周囲の空白は、iframeの元の幅と高さを含みます（変換とズームによって縮小される前）。

結果は次のようになります。

ここに画像の説明を入力してください

灰色で強調表示されている部分は、ページの元の非iframe部分であることに注意してください。iframeは、ページの強調表示されていない部分です。元のiframe内には、縮小されたブラウザインスタンスとその周囲の余分な空白があります。

この空白を取り除くための最良の方法は何ですか、または余分な空白が作成されないようにiframeを縮小する別の方法はありますか？

これは私の現在のCSSです：

#iframe {
    width: 800px; 
    height: 800px; 
    border; 1px solid black; 
    zoom: 1.00; 
    -moz-transform: scale(0.65); 
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.65); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.65); 
    -webkit-transform-origin: 0 0;
}

およびHTML：

<iframe id = 'iframe' src = 'http://www.wsj.com'></iframe>

ありがとう！

4

2 に答える 2

6

iFrameを含むDivを作成しました。DivはiFrameの制限境界として機能し、余分な空白が排除されます。

CSS： 

#iframe {
    width: 1100px; 
    height: 1000px; 
    border: 1px solid black; 
    zoom: 1.00; 
    -moz-transform: scale(0.65); 
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.65); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.65); 
    -webkit-transform-origin: 0 0;
}
#iframetest {
    width: 715px; 
    height: 650px; 
    margin: 10px; 
    border-style: solid; 
    border-width: 10px;
}        
#iframetest a {
    position: absolute; 
    top: -16px; 
    right: -16px;
}

HTML： 

echo "<div id = 'iframetest' style = 'display: none'>
          <iframe id = 'iframe' src = 'http://www.wsj.com'></iframe>
          <a href = 'javascript: closeiframe();'><img src = 'images/exitbutton.png' 
           width = '22px' height = '22px'>
          </a>
      </div>";
于 2012-12-19T20:13:25.700 に答える
0

このコードはページ全体を埋め込みますが、幅と高さは調整できます

<head>
<style type="text/css">
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>

<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.wsj.com" style="width:100%;height:100%"></iframe>
</body>
于 2012-12-19T16:10:55.710 に答える