HTML5 progress元素不呈现任何子元素？

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>的内部内容只会在不 支持it.This浏览器呈现类似的行为<video>，<canvas>等获得Chrome和Opera支持<progress>。

如果要渲染进度条本身的百分比，请尝试使用 use :: 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