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: </span>
<span class="object-inline-figcaption-caption-user-credit">
<a href="/profiles/Grey-Smith-Leigh/">Leigh Grey-Smith</a></span>,
<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都会产生略有不同的意外解释)?
什么'应该'正确的标记是什么?
没有找到相关结果
已邀请:
1 个回复
琳娘