css - 内联匿名框？

Question

我对此内容有疑问sitepoint link

以下标记呈现为 block + 内联 + block

<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

Sitepoint 链接说 2 个匿名框(第 1 个和第 3 个)应该内联以保持 p 内的所有框相同。但是 chrome 将 p 中的框呈现为 block 和内联的混合。

根据 CSS3 box model

block-level box may contain either line boxes or block-level boxes, but not both. If necessary, any line boxes that belong to this box's element are wrapped in one or more (as few as possible) anonymous boxes with a ‘display’ of ‘block’.

根据 W3C 的建议，站点内容似乎是正确的，但我在 chrome 上的 block 级框 (p) 中混合了多个框。

还有一点建议说匿名框应该只被阻止，这与站点 Material 相矛盾。

根据 CSS3 box model

Note that the anonymous boxes defined in this module are all block-level, but anonymous boxes defined in other modules may be different.

我的问题是:

1)所有3个框都应该内联吗？(浏览器呈现 block +内联+ block )

2)W3C标准中是否提到了inline anonymous box？

Answer 1

Visual Formatting Model 中的第 9.2.2.1 节实际上有一个与你几乎相同的例子，例如

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

In a document with HTML markup like this:

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

the <p> generates a block box, with several inline boxes inside it. The box for "emphasized" is an inline box generated by an inline element (<em>), but the other boxes ("Some" and "text") are inline boxes generated by a block-level element (<p>). The latter are called anonymous inline boxes, because they do not have an associated inline-level element.

您在 Chrome 的开发者工具中看到的是匿名框所在元素的显示值，而不是内联框本身的显示值。它们实际上都是内联框，但是 "In 1912" & "sank on her maiden voyage"将是匿名的，而 <em>元素将创建一个非匿名内联框，因为它是一个内联级元素。