Caselle anonime incorporate?

Question

Ho domanda su questo contenuto sitepoint link

seguito markup è reso come blocco + linea + bloccare

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

Chrome:

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

collegamento Sitepoint dice 2 scatole anonime (1 ° e 3 °) dovrebbe essere in linea per mantenere tutte le scatole uguali dentro p. Ma chrome esegue il rendering delle caselle all'interno di p come mix di blocchi e inline.

Secondo CSS3 box model

scatolare livello di blocco può contenere scatole Line o scatole a livello di blocco, ma non entrambi. Se necessario, le caselle di linea che appartengono all'elemento di questa casella sono racchiuse in una o più (meno poche) caselle anonime con una "visualizzazione" di "blocco".

In base alla raccomandazione del W3C, il contenuto di sitepoint sembra corretto, ma sto ottenendo un mix di scatole all'interno della casella a livello di blocco (p) su chrome.

Ancora un punto di raccomandazione dice che le caselle anonime dovrebbero essere solo blocchi che contraddicono il materiale del sito.

Secondo CSS3 box model

noti che le scatole anonime definite in questo modulo sono tutte di blocco, ma scatole anonime definiti in altri moduli possono essere diverse.

La mia domanda è:

1) Se tutte le 3 scatole essere in linea (Browser rende blocco + linea + blocco)

2) È in linea di dialogo anonima di cui standard W3C?

Answer 1

Sezione 9.2.2.1 nel Visual Formatting Model ha in realtà un esempio quasi identico al tuo, ad es.

Qualsiasi testo contenuto direttamente all'interno di un elemento del contenitore di blocchi (non all'interno di un elemento in linea) deve essere considerato come elemento in linea anonimo.

In un documento con markup HTML in questo modo:

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

il <p> genera un riquadrato a blocco, con diversi riquadrati in riga al suo interno. La casella "enfatizzata" è una casella in linea generata da un elemento in linea (<em>), ma le altre caselle ("Alcune" e "testo") sono caselle in linea generate da un elemento a livello di blocco (<p>). Questi ultimi sono chiamati box in linea anonimi, poiché non hanno un elemento a livello di linea associato.

Quello che vedi negli strumenti di sviluppo di Chrome è il valore di visualizzazione per l'elemento in cui risiedono le caselle anonime, non delle caselle in linea.Sono tutte caselle effettivamente in linea, ma "In 1912""sank on her maiden voyage" sarebbe anonimo mentre l'elemento <em> creerebbe una casella in linea non anonima in quanto è un elemento a livello di riga.

Answer 2

Il testo prima e dopo l'elemento em è racchiuso in caselle anonime in linea.

Se si vede in questo fiddle, tutto il testo è mostrato in linea su una riga. L'em è un elemento in linea, "Nel 1912", è avvolto in una scatola anonima incorporata, così come "affondò nel suo viaggio inaugurale".

Il debugger dirà che l'elemento p è display: block così com'è. Il debugger tuttavia non mostra caselle anonime, quindi non vedrai che il testo prima e dopo lo em sono effettivamente in linea. Puoi vederlo però, come se fossero display: block sarebbero la larghezza dell'elemento e spingere lo em su una nuova riga.

anonimi riquadrati in riga sono menzionati nelle specifiche qui: http://www.w3.org/TR/CSS2/visuren.html#anonymous