html5，段落中的figure / figcaption给出了不可预测的输出 [英] html5, figure/figcaption inside a paragraph gives unpredictable output

问题描述

以下标记使用figure元素来显示一个图像，并与段落的文本内联 - 因此该图在第一个< p> 。

 < div class =object-content> 
< p> 
< figure class =object-inline-figure> 
  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>积分：& nbsp;< / span> 
< span class =object-inline-figcaption-caption-user-credit> 
< a href =/ profiles / Gray-Smith-Leigh /> Leigh Gray-Smith< / a>< / span>，& nbsp; 
< span class =object-inline-figcaption-caption-custom-credit> Lady Grey< / span> 
< / p> 
< / figcaption> 
< / figure> 
功能驱动因素与象征力量，
景观与建筑，场地与环境，材料质量
以及体验质量之间的关系都得到充分考虑。这种高质量的
设计分辨率可以部分归因于设计师和客户之间的关系
。< / p> 
< / div> 
  

然而，至少在Chrome和Firefox中，这似乎是个问题，也就是说，当使用'inspect元素'（在Chrome中），< figure> 和< p> 文字/标记会被报告为例如：

 < p>< / p> 
< figure> 
＃... 
< / figure> 
功能驱动因素与象征力量，
景观与建筑，场地与环境，材料质量
以及体验质量之间的关系都得到充分考虑。这种高质量的
设计分辨率可以部分归因于设计师和客户之间的关系
。 
< p>< / p> 
  

在<$ c之外有效'孤立'文本'The relationship between ...' $ c $< p> 标记，失去其风格和语义含义......至少对网页页面的人类观看者而言。

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

 < figure> 
＃... 
< / figure> 
 
功能驱动因素与象征力量，
景观与建筑，场地与环境，材料质量
以及体验质量之间的关系都得到充分考虑。这种高质量的
设计分辨率可以部分归因于设计师和客户之间的关系
。 
< / p> 
  

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

• 是否正确使用< figure> （前例）？
  
• 浏览器出错了吗？ （Safari / Firefox和Chrome都会产生稍微不同的意外解释）？


• 正确的标记应该是什么？

解决方案

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

因此数字标签应放置在p标签之外。你可以浮动它以允许换行。

The following markup uses the figure element to display an image, inline with the text of a paragraph -- hence the figure is 'included' inside the first <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>

However, this seems to problematic in at least Chrome and Firefox, that is, when using 'inspect element' (in Chrome), the <figure> and the <p> text/markup are reported to be like:

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

Which effectively 'orphans' the text 'The relationships between...' outside of its <p> markup, losing its styling and semantic meaning... at least to the human viewer of the website page.

Moving the <figure> outside of the <p> seems to have more predictable results, i.e.:

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

But we kinda lose the 'textwrap' effect when the <figure> is text-aligned left or right.

• Is this proper use of <figure> (the former example)?
• Is the fault with the browser? (Safari/Firefox & Chrome all produce slightly different, unexpected interpretations)?
• What 'should' the proper markup be?

解决方案

The figure element is block level and therefore the behavior is correct. Permitted parent tags are those that allow flow elements - http://dev.w3.org/html5/markup/figure.html (example div, section, article...)

Therefore the figure tag should be placed outside the p tag. You can float it to allow for wrap.

这篇关于html5，段落中的figure / figcaption给出了不可预测的输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！