7

実際には、テキストインデントを使用して進行状況の途中にテキストを配置する進行状況バーがあります。

Chrome と IE ではすべて正常に動作しますが、Firefox では動作しません。(うん、信じられない)

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 は、プログレス バーを塗りつぶしたときに期待される結果を表示するための動的変数です。

4

1 に答える 1

4

これは、以前に報告されていない Gecko のバグのようです。https://bugzilla.mozilla.org/show_bug.cgi?id=908706を提出しました

回避策として、パーセンテージではない text-indent 値を使用できますか?

于 2013-08-23T16:36:33.593 に答える