1

Blue inline-block #b内にvertical-align: middle配置されred #aます。ある時点blue #bで、その親の完全な高さを持っています。

http://jsfiddle.net/TK2qs/1/

トラブルメーカーはOperaのみ[1]で、下にスペースがあってもウィンドウに垂直スクロールバーが表示されるred parent #a[2]。非常に面白い点は、マークアップには、その下の余分なスペースを占有しているように見えるものは実際には何もないということred #aですdocument element。

display: inline-blockまたはvertical-align: middleの規則blue #bが破棄されると、注意された動作は消失します。それでも、これらのルールの両方を維持するソリューションを見つけることは役に立ちます。

JSFiddle で問題を再現するには、右下のサブフレームの境界線をドラッグしてください。

ご清聴ありがとうございました！

[1_] 現在のバージョン: 12.11 でのみ確認。

[2_] [jsfiddle.net の例][1] の 40 ～ 50 ピクセル。red #a高さによってサイズが異なります。

4

2 に答える 2

2

フリクレツさんの回答に同感です。 overflow:hidden神秘的な目に見えないコンテンツを取り除きます。

奇妙なことに、テキストを入れれば入れるdiv#cほど、スペースが狭くなりました。テキストが高さの半分以上を埋めると、スペースは完全になくなります。これは観察であり、解決策ではありません!

これをバグとして Opera に報告しました。それが善意になるかどうかはわかりません...

于 2013-02-02T14:50:15.110 に答える
1

http://jsfiddle.net/Mpmgv/

私は自分で2つの回避策を見つけました。

まず、 のオーバーフローを非表示にしblue #bます。それが実行可能な解決策であるという事実は、目に見えない大きな要素がおそらく 内のどこかにあり、他のどこにもないという考えを与えてくれblue #bます。

2 番目の回避策は、合成絶対位置の子を 内に作成することblue #bです。そのため、配置されることを意図したすべてのコンテンツはblue #b合成の子になります。

要素に適切なクラスを追加することで、これらのソリューションの両方をチェックアウトできますred #a。

それでも、Opera でこのような奇妙な問題が発生する理由についての考えをお待ちしており、非常に感謝しています。

于 2013-02-02T13:32:03.227 に答える