HTML5进度元素不呈现任何子元素？答案

【问题标题】：HTML5 progress element not rendering any child elements?HTML5进度元素不呈现任何子元素？
【发布时间】：2012-04-15 01:59:40
【问题描述】：

代码是：

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

100% 包裹在 span 标签、p、div 和其他进程中，没有任何东西可以显示。在 Chrome 和 Opera 上运行，在 W7x64 上运行。

这是默认行为吗？我应该用position:absolute 写在进度条的顶部吗？

【问题讨论】：

标签： html dom google-chrome

【解决方案1】：

原来<progress> 标签内的内容是不支持 HTML5 的浏览器的后备。

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

【讨论】：

【解决方案2】：

<progress> 的内部内容只会在不支持的浏览器中呈现支持它。这与<video>、<canvas> 等行为类似。Chrome 和Opera 都支持<progress>。

如果您想在进度条本身旁边呈现百分比，请尝试使用 ::after 和数据属性。有点像穷人的数据绑定：

<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

【讨论】：

但是我不能直接绑定子元素的 value 属性可以吗？关键是我希望它在进度条的顶部居中显示，黑色带有白色阴影。而更新进度条的时候，只需要$('progress').val(12)的东西。