6

我对此内容站点链接有疑问

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

<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 盒子模型

块级框可以包含行框或块级框，但不能同时包含两者。如有必要，任何属于此框元素的行框都被包裹在一个或多个（尽可能少的）匿名框中，其“显示”为“块”。

根据 W3C 建议，站点点内容似乎是正确的，但我在 chrome 上的块级框（p）内混合了框。

再次有一点建议说匿名框应该只被阻止，这与站点点材料相矛盾。

根据CSS3 盒子模型

注意，本模块中定义的匿名框都是块级的，但其他模块中定义的匿名框可能不同。

我的问题是：

1）所有3个框都应该内联吗？（浏览器呈现块+内联+块）

2) W3C 标准中是否提到了内联匿名框？

4

2 回答 2

5

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

任何直接包含在块容器元素内（不在行内元素内）的文本都必须被视为匿名行内元素。

在带有 HTML 标记的文档中，如下所示：

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

<p>生成一个块框，里面有几个内联框。"emphasized" 的框是由内联元素 ( <em>) 生成的内联框，但其他框 ("Some" 和 "text") 是由块级元素 ( <p>) 生成的内联框。后者被称为匿名内联框，因为它们没有关联的内联级元素。

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

于 2013-05-29T21:06:46.543 回答
3

em元素之前和之后的文本被包裹在匿名内联框中。

如果您在这个fiddle中看到，所有文本都显示在一行内。em 是一个内联元素，“In 1912”被包裹在一个内联的匿名框中，就像“在她的处女航中沉没”一样。

调试器会说p元素是display: block原样的。但是，调试器不会显示匿名框，因此您不会看到 之前和之后的文本em实际上是内联的。您可以看到它，就好像它们是display: block元素的宽度一样，然后将其推em到新行上。

此处的规范中提到了匿名内联框：http: //www.w3.org/TR/CSS2/visuren.html#anonymous

于 2013-05-29T21:08:10.030 回答