html5,段落中的figure/figcaption给出了不可预测的输出

Question

以下标记使用figure元素显示图像,与段落文本内联 - 因此图形在第一个内部被"包含" <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中存在问题,也就是说,当使用'inspect element'(在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>标记之外,失去其样式和语义......至少对网站页面的人类观察者而言.

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

但是,我们当有点儿失去"textwrap"效应<figure>被text-align编左边或右边.

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

Answer 1

figure元素是块级别,因此行为是正确的.允许的父标签是允许流元素的标签 - http://dev.w3.org/html5/markup/figure.html(示例div,section,article ...)

因此,数字标签应放在p标签之外.您可以将其浮动以允许换行.