隐藏溢出的 Firefox 文本缩进错误答案

【问题标题】：Firefox text-indent bug on overflow hidden隐藏溢出的 Firefox 文本缩进错误
【发布时间】：2013-08-23 14:40:35
【问题描述】：

实际上我有一个进度条，它使用文本缩进将一些文本放在进度中间。

在 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 是动态变量，用于在填充进度条时显示预期结果。

【问题讨论】：

如何删除溢出：隐藏； ?

标签： html css google-chrome firefox

【解决方案1】：

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

作为一种解决方法，您能否使用不是百分比的文本缩进值？

【讨论】：

4 年后，这个 bug 仍然存在。
刚刚又戳了一下。