html5, figure / figcaption внутри абзаца дает непредсказуемый вывод - PullRequest
Новая
       12

html5, figure / figcaption внутри абзаца дает непредсказуемый вывод

6 голосов
/ 02 марта 2011

В следующей разметке для отображения изображения используется элемент 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>

Но мы теряем эффект 'textwrap', когда <figure> имеет text-align ed влево или

  • Правильно ли используется <figure> (предыдущий пример)?
  • Неисправность в браузере?(Safari / Firefox и Chrome все дают немного разные, неожиданные интерпретации)?
  • Какой должна быть правильная разметка?

1 Ответ

7 голосов
/ 02 марта 2011

Элемент figure является блочным, и поэтому поведение корректное. Разрешенные родительские теги - это те, которые допускают элементы потока - http://dev.w3.org/html5/markup/figure.html (пример div, section, article ...)

Поэтому тег рисунка должен быть размещен вне тега p. Вы можете использовать его для переноса.

...