1

div内にiframeを配置する場合:

<div id="big-box">
    <iframe src="http://www.google.com" class="frame">
    </iframe>
</div>

CSS を使用して、使用可能なすべての画面領域を iframe が占めるようにします。

#big-box {
    background-color: #aaf;
}

.frame {
    border: medium none;
    height: 100%;
    width: 100%;
}

Chrome (12.07) では問題なく動作しますが、Firefox (3.6.17) では失敗します。このデモは、Chrome では JSFiddle 領域全体にiframeが含まれていることを示していますが、このサンプルを Firefox で試すと、iframeは高さではなく幅全体を占めます。

また、大きなボックスの幅と高さを修正すると機能しますが、これはポイントではありません (これは変更できません)。ポイントは、この非互換性の理由とそれを修正する方法です (常に Chrome と同じように行ってください)。

4

3 に答える 3

2

Google Chrome の最新バージョン (14.0.835) は、Firefox の最新バージョン (3.6.23) および IE の最新バージョン (9.0.3) とまったく同じ方法でフィドルを表示します。つまり、そもそも Google Chrome が「正しく」行うべきではなかったことがわかります。間違って欲しいものを表示していた...

position: absolute;のスタイルに追加すると、.frame目的が達成されます。上記の 3 つのブラウザーすべてで動作します。

ここにフィドルがあります：jsfiddle.net/Q5mt5/1

于 2011-10-13T03:29:54.693 に答える
1

Dennis ' jsFiddleから取得して、次のことができると考えました。

html, body
{
    width: 100%;
    height: 100%;
    padding:0px;
}
div {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

iframe {
    height: 100%;
    width: 100%;
}

jsfiddleは Firefox 4 と Chrome 14 で動作します (申し訳ありませんが、ここにあるのはそれだけです)。

于 2011-10-13T03:55:52.297 に答える
0

ここでは Firefox が正しいです。Aniframeはデフォルトでインライン置換要素であるため、ベースライン上にあります。フレーム クラスのスタイルに追加display: block;すると、ブロック サイズ規則に従い、div.

于 2011-10-09T20:17:37.493 に答える