10

次のマークアップは、図要素を使用して、段落のテキストとインラインで画像を表示します。したがって、図は最初の 内に「含まれます」<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 では問題があるようです。つまり、(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 はすべて、わずかに異なる予期しない解釈を生成します)?
  • 適切なマークアップは何であるべきか?
4

1 に答える 1

13

Figure 要素はブロック レベルであるため、動作は正しいです。許可される親タグは、フロー要素を許可するものです - http://dev.w3.org/html5/markup/figure.html (例 div、セクション、記事...)

したがって、図のタグは p タグの外側に配置する必要があります。ラップできるように浮かせることができます。

于 2011-03-02T04:37:26.677 に答える