Элемент прогресса HTML5 не отображает дочерние элементы?

Question

Код:

 <progress max="100" value="100">100%</progress>

То, что 100% либо обернуто в тэги span, p, div, прочие прогрессы, ничего не заставляет отображаться. И на Chrome, и на Opera, работает на W7x64.

Это поведение по умолчанию? Должен ли я писать в верхней части индикатора выполнения с position:absolute?

Answer 1

Оказывается, содержимое внутри тега <progress> является резервным для браузеров, которые не поддерживают HTML5.

http://lea.verou.me/2011/07/a-polyfill-for-html5-progress-element-the-obsessive-perfectionist-way/

Answer 2

Внутреннее содержимое <progress> будет отображаться только в браузерах, которые его не поддерживают. Это поведение аналогично <video>, <canvas> и т. Д. И Chrome, и Opera поддерживают <progress>.

Если вы хотите отобразить процент вместе с индикатором выполнения, попробуйте использовать атрибуты :: after и data.Вид привязки данных бедного человека:

<style>
#progress:after {
  content: attr(data-percent) '%';
  margin-left: 5px;
}
</style>

<div id="progress" data-percent="10">
  <progress max="100" value="10" min="0"></progress>
</div>

Вам нужно добавить прослушиватель изменений для обновления data-percent при изменении значения прогресса.

См .: http://jsbin.com/asuqow/edit#html,live