Question

我在php应用程序中使用以下代码。

<p class="foo"><?php echo $foo->data; ?></p>

在浏览器中呈现的内容如下：

<p class="foo"></p>
<p>foo dataription here</p>
<p></p>

但如果我这样使用：

<?php echo $foo->data; ?>

然后，它正确地呈现DOM元素：

<p>foo description here</p>

为什么<p class="foo"><?php echo $foo->data; ?></p>不会像下面那样呈现？

<p class="foo">foo description here</p>

Answer 1

我注意到$foo->data带有<p>的html标记。但是像div或p这样的块级元素不能驻留在p元素中。

因此，

<p class="foo">
   <p>foo description here</p>
</p>

由浏览器呈现，如下所示：

<p class="foo"></p>
<p>foo description here</p>
<p></p>

因为它正在展开块级元素，即p元素之外的p.foo元素。这只是因为我们不能在语义上嵌套p元素中的任何块级元素。

因此，在p元素中插入任何内容时要小心，以确保p元素中没有任何块级元素。

p元素只能包含phrasing content。

短语内容是文档的文本，以及在段落内标记该文本的元素。他们是：

a，abbr，area（如果它是地图元素的后代），audio，b，bdi，bdo，br，button，canvas，cite，code，data，datalist，del，dfn，em，embed，我，iframe，img，输入，ins，kbd，keygen，标签，地图，标记，数学，米，noscript，对象，输出，进展，q，红宝石，s，samp，脚本，选择，小，跨度，强， sub，sup，svg，template，textarea，time，u，var，video，wbr，Text

希望，这有助于更多用户。

p元素内的内容包裹在元素外部

1 个答案: