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

Question

以下标记使用figure元素来显示图像，该图像与段落文本内联——因此该图“包含”在第一个

内。

<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 中似乎是有问题的，也就是说，当使用“inspect element”（在 Chrome 中）时，

和

文本/标记类似于：

<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>

它有效地“孤立”了其

标记之外的文本“...之间的关系”，失去了其样式和语义。至少对于网站页面的浏览者而言。

将

移到

之外似乎会产生更可预测的结果，即：

<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>

但是当

向左或向右文本对齐。

• 这是

  （前一个示例）的正确使用吗？

• 是浏览器的问题吗？ （Safari/Firefox 和 Chrome 都会产生略有不同的、意想不到的解释）？
• 正确的标记“应该”是什么？

Answer 1

图元素是块级的，因此行为是正确的。允许的父标签是那些允许流程元素的标签 - http://dev.w3.org/html5 /markup/figure.html （例如 div、section、article...）

因此，figure 标签应放置在 p 标签之外。您可以将其浮动以允许包裹。