html5，段落内的图形/无花果标题给出了不可预测的输出

Question

以下标记使用图形元素显示图像，与段落文本内联——因此图形“包含”在第一个 <p> 中。 .

<div class="object-content"> 
    <p>
        <figure class="object-inline-figure"> 
            <img 
                class="object-inline-figure-image" 
                height="200"
                src="/site_media/media/files/images/WH-487_opt.jpeg"
                width="300"> 
            <figcaption class="object-inline-figcaption">
                <p class="object-inline-figcaption-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p class="credits">
                    <span>Credit:&nbsp;</span>
                    <span class="object-inline-figcaption-caption-user-credit">
                        <a href="/profiles/Grey-Smith-Leigh/">Leigh Grey-Smith</a></span>,&nbsp;
                    <span class="object-inline-figcaption-caption-custom-credit">Lady Grey</span>
                </p>
            </figcaption> 
        </figure>
        The relationships between functional drivers and symbolic power, 
        landscape and architecture, site and context, quality of materials 
        and quality of experience are all well considered. This high quality 
        design resolution can, in part, be attributed to the relationship 
        between designer and client.</p>
</div>

但是，这至少在 Chrome 和 Firefox 中似乎是有问题的，也就是说，当使用“检查元素”(在 Chrome 中)时，<figure>和 <p>文本/标记被报告为:

<p></p>
<figure>
    #...
</figure>
The relationships between functional drivers and symbolic power, 
landscape and architecture, site and context, quality of materials 
and quality of experience are all well considered. This high quality 
design resolution can, in part, be attributed to the relationship 
between designer and client.
<p></p>

这有效地在其 <p> 之外“孤立”了文本“The relationships between...”标记，失去其样式和语义意义……至少对于网站页面的人类浏览者而言。

移动 <figure>在<p>之外似乎有更多可预测的结果，即:

<figure>
    #...
</figure>
<p>The relationships between functional drivers and symbolic power, 
landscape and architecture, site and context, quality of materials 
and quality of experience are all well considered. This high quality 
design resolution can, in part, be attributed to the relationship 
between designer and client.
</p>

但是当 <figure> 时我们有点失去了 'textwrap' 效果是text-align向左或向右编辑。

• 这是对 <figure> 的正确使用吗？ (前一个例子)？
• 是浏览器的问题吗？ (Safari/Firefox 和 Chrome 都会产生略有不同的意想不到的解释)？
• 正确的标记“应该”是什么？

Answer 1

图形元素是 block 级的，因此行为是正确的。允许的父标签是那些允许流元素的标签 - http://dev.w3.org/html5/markup/figure.html (例如 div、部分、文章...)

因此 figure 标签应该放在 p 标签之外。您可以 float 它以允许换行。