隐藏溢出的缩进错误

其实我有一个进度条,它使用文本缩进在进度中间放置一些文本。

在Chrome和IE中都可以正常工作,但不在Firefox中。 (yeap,我无法相信)

检查Chrome和Firefox的区别。

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

动画版

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

bar2中的宽度和text-indent是动态变量,用于在填充进度条时显示预期结果。


这看起来像一个以前未报告的壁虎错误。 我提交了https://bugzilla.mozilla.org/show_bug.cgi?id=908706

作为一种解决方法,您是否可以使用不是百分比的文本缩进值?

链接地址: http://www.djcxy.com/p/73865.html

上一篇: indent bug on overflow hidden

下一篇: chrome browser not sending 'If