2013-05-29 4 views
5

私はブロックsitepoint link匿名のボックスをインライン化しますか?

次のマークアップは、ブロック+インライン+としてレンダリングされ、この内容に疑問を持っている

<p>In 1912, <em>Titanic</em> sank on her maiden voyage.</p> 

クローム:

In 1912, - display: block 
<em>Titanic</em> - display:inline 
sank on her maiden voyage. - display:block 

Sitepointリンクは2つの匿名ボックス(第一及び第三)と言いますすべてのボックスをp内で同じに保つためにインラインでなければなりません。しかし、chromeはpの枠をブロックとインラインのミックスとしてレンダリングします。 CSS3 box model

ブロックレベル1箱として

いずれかの行ボックスまたはブロック・レベルのボックスではなく、両方を含んでいてもよいです。必要に応じて、このボックスの要素に属するラインボックスは、 'display'が 'block'の1つ以上の(可能な限り)匿名ボックスにラップされます。

W3C推奨サイトポイントの内容によると正しいと思われますが、クロムにブロックレベルのボックス(p)を混在させています。

また、匿名のボックスは、サイトポイントの資料と矛盾するブロックのみである必要があります。このモジュールで定義された匿名ボックスがすべてブロックレベルであるが、他のモジュールで定義された匿名ボックスが異なっていてもよいことCSS3 box model

注1として

私の質問は:?

1)すべて3箱がインラインであるべき(ブラウザがブロック+インライン+ブロックをレンダリング)

2)インラインW3C標準に記載された匿名のボックスですか?

答えて

4

Visual Formatting Modelの第9.2.2.1項は実際にあなたとほぼ同じ例です。

ブロックコンテナ要素(インライン要素内ではない)内に直接含まれるテキストは、すべて匿名のインライン要素として扱う必要があります。このようなHTMLマークアップと文書で

<p>Some <em>emphasized</em> text</p> 

<p>は、その中のいくつかのインラインボックスで、ブロックボックスを生成します。 "emphasized"のボックスはインライン要素(<em>)によって生成されるインラインボックスですが、他のボックス( "Some"と "text")はブロックレベルの要素(<p>)によって生成されるインラインボックスです。後者は、関連するインラインレベルの要素を持たないため、匿名のインラインボックスと呼ばれます。

Chromeのデベロッパーツールには、インラインボックスではなく、匿名ボックスが存在する要素の表示値が表示されます。それらはすべて実際にインラインボックスですが、 & "sank on her maiden voyage"は匿名ですが、<em>要素はインラインレベルの要素であるため非匿名のインラインボックスを作成します。

+1

「ラインボックスを作成します」は「インラインボックスを作成します」:

匿名インラインボックスは、ここでスペックに記載されています。 「ラインボックス」は別のものです。 1つのラインボックスは、最初の匿名のインラインボックスによって作成されます。収容するブロックボックスの幅に応じて、さらにラインボックスを作成することができる。 – Alohci

2

em要素の前後のテキストは、匿名のインラインボックスでラップされます。

このfiddleに表示されている場合、すべてのテキストが1行にインラインで表示されます。 emはインライン要素で、「1912年には」インラインの匿名のボックスに包まれています。「彼女の乙女の航海に沈んだ」

デバッガはp要素がそのままdisplay: blockと表示されます。デバッガは匿名のボックスを表示しないので、emの前後のテキストが実際にインラインであることはわかりません。あなたはそれが要素の幅になるようにdisplay: blockであるかのようにそれを見ることができ、emを新しい行にプッシュします。 http://www.w3.org/TR/CSS2/visuren.html#anonymous

関連する問題