Question

代码是：

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

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

这是默认行为吗？我应该使用position:absolute在进度条上写一下吗？

Answer 1

<progress>的内部内容只会在没有的内容中呈现支持它。这与<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

Answer 2

对于不支持HTML5的浏览器，<progress>标记内的内容是后备内容。

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

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

2 个答案: