实际上我有一个进度条,它使用文本缩进将一些文本放在进度中间。
在 Chrome 和 IE 中都可以正常工作,但在 Firefox 中却不行。(是的,我不敢相信)
检查 Chrome 和 Firefox 的区别。
动画版
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;
}
bar2 中的宽度和 text-indent 是动态变量,用于在填充进度条时显示预期结果。