html - Firefox text-indent bug on overflow hidden -


actually have progress bar use text-indent put text in middle of progress.

all work fine in chrome , ie, isn't in firefox. (yeap, can't believe it)

check difference in chrome , firefox.

http://jsfiddle.net/zgyaz/1/

animated 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; } 

width in bar2 , text-indent dynamic vars show expected result on fill progress bar.

this looks unreported gecko bug. filed https://bugzilla.mozilla.org/show_bug.cgi?id=908706

as workaround, able use text-indent value that's not percentage?


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -