HTML5 진행 요소가 하위 요소를 렌더링하지 않습니까?

Question

코드는 다음 중 하나가 아무것도 이제까지이 표시 얻을하지 않습니다, 스팬 태그, P의, DIV 년대, 다른 진행됨에 싸여

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

100%있다. Chrome 및 Opera에서 W7x64를 실행 중입니다.

이 기본 동작입니까? 진행률 막대 상단에 position:absolute으로 기록해야합니까?

Answer 1

가 HTML5를 지원하지 않는 브라우저에 대한 폴백하는 <progress> 태그 내부의 컨텐츠를 해제합니다.

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

Answer 2

<progress>의 내부 내용이뿐만 아니라 지원 껄을 브라우저에서 렌더링 비슷한 동작입니다 <video>, <canvas> 등 크롬 모두와 오페라 지원 <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