2013-08-23 21 views
7

Eigentlich habe ich einen Fortschrittsbalken, Text-Einzug verwenden, um etwas Text in der Mitte des Fortschritts.Firefox Text-Einzug Bug auf Überlauf versteckt

alle funktionieren in Chrome und IE, aber nicht in Firefox. (yeap, ich kann es nicht glauben)

Überprüfen Sie den Unterschied in Chrome und Firefox.

http://jsfiddle.net/ZGyaz/1/

animierte Version

http://jsfiddle.net/ZGyaz/19/

HTML

<div class="container"> 
    <div class="bars bar1">sametext</div> 
    <div class="bars bar2">sametext</div> 
</div> 

CSS

.container{ 
    border:1px solid #09c; 
    height: 20px; 
    width: 100%; 
    position: relative; 
} 

.container .bars{ 
    text-indent: 45%; 
    position: absolute; 
    top:0; 
    font-family: arial; 
    color: #09c; 
} 

.container .bar2{ 
    background-color: #09c; 
    width: 50%; 
    color: #fff; 
    overflow: hidden; 
} 

Die Breite in bar2 und der Texteinzug sind dynamische Variablen, um das erwartete Ergebnis beim Füllen des Fortschrittsbalkens anzuzeigen.

+1

Wie über entfernen Überlauf: versteckt; ? –

Antwort

4

Das sieht wie ein zuvor nicht gemeldeter Gecko-Bug aus. Ich habe https://bugzilla.mozilla.org/show_bug.cgi?id=908706

Als Workaround können Sie einen Text-Einzug Wert verwenden, der kein Prozentsatz ist?

+0

4 Jahre später und dieser Fehler existiert noch. –

+0

steckte es einfach wieder. –

Verwandte Themen