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

Следующая разметка использует элемент figure для отображения изображения, встроенного в текст абзаца - следовательно, рисунок «включен» внутри первого

.

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

и

текст / разметка имеют вид:

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

Который фактически "осиротел" текст "Отношения между ..." вне его

разметки, теряя свой стиль и семантическое значение ... по крайней мере, для человека, просматривающего веб-сайт page.

Перемещение

за пределы

, похоже, дает более предсказуемые результаты, например:

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

Но мы теряем эффект «переноса текста», когда

- это text-align ed left or right.

  • Правильно ли используется
    (предыдущий пример)?
  • Ошибка браузера? (Safari / Firefox и Chrome дают несколько разные, неожиданные интерпретации)?
  • Какой должна быть правильная разметка?
7
задан Daryl 2 March 2011 в 04:10
поделиться