html5,段落中的figure / figcaption会产生不可预测的输出

以下标记使用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>
但是当
<figure>
向左或向右.ѭ时,我们有点失去'textwrap'效果。 这是正确使用
<figure>
(前一个例子)吗? 浏览器有问题吗? (Safari / Firefox和Chrome都会产生略有不同的意外解释)? 什么'应该'正确的标记是什么?     
已邀请:
figure元素是块级别,因此行为是正确的。允许的父标签是允许流元素的标签 - http://dev.w3.org/html5/markup/figure.html(示例div,section,article ...) 因此,数字标签应放在p标签之外。您可以将其浮动以允许换行。     

要回复问题请先登录注册