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>

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

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

Answer 1

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

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

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

1 个答案: