2

SO Span で数回前に投稿された TDで完全な高さを取得する 、いくつかの回避策を試したところ、期待されていたことを実行する適切なコード (受け入れられたコード) を見つけましたが、これが機能している理由を特定できませんでした、 なぜ

<td style="padding:0px;">
 <span style="height:100%; width:5px; background-color:pink;">&nbsp;</span>
</td>

と非常に大きな違いを生む

<td style="padding:0px;">
 <span style="height:100%; width:5px; 
    background-color:pink;display:block;overflow:auto">&nbsp;
 </span>
</td>

詳細を説明する jsfiddle を次に示しますhttp://jsfiddle.net/7kkhh/2/

ディスプレイとオーバーフローの背後にあるメカニズムを深く知っている人は、これを説明できますか? （この特定の状況に関連していますか、それとも一般的に使用されていますか？）

EDITED： これはChromeでのみ発生するようです

4

2 に答える 2

2

span要素は、デフォルトでは、テキスト ノードと同様に としてレンダリングされますinline-block。それらは子要素の周りで折りたたまれます（または、子要素が必要とするだけのスペースを占有しますが、それ以上のものはありません）。

要素は、divデフォルトで としてレンダリングされますblock。子要素が収まらない場合を除き、親要素のサイズに拡張されます。(実際にはandoverflowの短縮形) が(デフォルト) の場合、要素は子要素が収まるまで展開されます。に他の値が設定されていない限り、親要素が展開されます。isの場合、子要素がこの要素に収まらない場合、要素は展開されませんが、代わりにスクロール バーが表示されます。isの場合、要素は展開されませんが、親要素の外側にある子要素 (の一部) は非表示になります (これは要素をスクロールできないという意味ではありませんが、スクロール バーは表示されません) ）。overflow-xoverflow-yautooverflowoverflowscrolloverflowhidden

とinline-block競合するheight: 100%;ため、CSS スタイルはレンダリング中に無視されます。表のセルには、または類似のdisplay値があります。table-cellその振る舞いについてはよくわかりません。テーブルとレイアウトは、さまざまなブラウザーで一貫したレイアウトを得るために、常に厄介な組み合わせです。ドキュメントを xhtml-strict で検証すると、通常、ブラウザ間でドキュメントを一貫して表示するのに役立ちます。

于 2013-06-28T14:09:30.763 に答える