HTML5-Fortschrittselement, das keine untergeordneten Elemente darstellt?

Question

-Code ist:

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

Das 100% entweder in span-Tags eingewickelt, P, divs, andere Fortschritte, macht es nichts jemals angezeigt bekommen. In Chrome und Opera unter W7x64.

Ist dieses Standardverhalten? Sollte ich über den Fortschrittsbalken mit position:absolute schreiben?

Answer 1

aus Schaltet den Inhalt innerhalb des <progress>-Tag ist für Browser, die HTML5-Fallback nicht unterstützen.

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

Answer 2

Der innere Inhalt eines <progress> nur in Browser zeigen, die nicht Unterstützung it.This tun, ist ein ähnliches Verhalten wie <video>, <canvas> usw. Sowohl Chrome und Opera Unterstützung <progress>.

Wenn Sie den Prozentsatz neben dem Fortschrittsbalken selbst rendern möchten, versuchen Sie usage :: after und data attributes. Sortieren eines schlechten Daten des Mannes Bindung:

<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> 

Sie müssten eine Änderung Zuhörer hinzufügen data-percent wenn der Fortschritt des Wertänderungen zu aktualisieren.

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