1 
<div><iframe style="height: 100px"></iframe></div>
<div style="line-height: 0"><iframe style="height: 100px"></iframe></div>

http://jsfiddle.net/p6SD4/

DOM を調べると、最初の div の高さが 108px であるのに対し、2 番目の div の高さは 104px であることがわかります。境界線のある iframe は 104 ピクセルなので、line-height が設定されているときに 4 つの余分なピクセルが追加されるのはなぜですか?

Mac 用 Chrome 28.0.1500.71 でテスト済み。

4

3 に答える 3

3

iframe はベースライン上にあるためです。ただし、div は支柱を含むのに十分な高さである必要があり、支柱はベースラインを下回り、その高さは line-height によって決まります。

0 line-height = 0px 支柱の高さ = ベースラインより下の支柱の 0px。

iframe { display:block; }または またはiframe { vertical-align:top; }またはを使用して、iframe { vertical-align:bottom; } これを停止します。

(display:block はライン ボックスの作成を停止するため、ストラットはありません。vertical-align:top および vertical-align:bottom はストラットがライン ボックスのベースラインを iframe と共有しないようにするため、ストラットはより高く配置されます。 iframe の下部より下にある部分はありません. line-height が iframe の高さよりも大きい場合、strut は line-box の高さを強制するため、div の高さは依然として iframe の高さよりも大きくなることに注意してください. vertical-align 設定の）

于 2013-07-18T12:53:46.763 に答える
2

Chrome 28 では、両方の div の高さが 109px のようです。要素とすべてのインライン要素のデフォルトvertical-align値はベースラインであることに注意してください。これを下に変更すると、おそらく予想どおりに両方の要素が配置されます。<iframe>

http://jsfiddle.net/p6SD4/1/

于 2013-07-18T12:42:11.257 に答える
0

それはあなたのブラウザに依存するかもしれません。Firefox と Chrome では、両方の IFRAME 要素の高さが 104 ピクセル (100 ピクセル + 境界線の 4 ピクセル) です。

どのブラウザを使用していますか? border="0" で試しましたか?

于 2013-07-18T12:45:45.790 に答える