2

私はこれを理解することはできません。

IE8 +とFirefoxで動作するようですが、Chromeはそれを「間違って」表示します（おそらくそれは正しいです、誰が知っていますか）：

私はBootstrapを使用しているので、それが何かに影響を与えているかどうかはわかりません。

http://jsfiddle.net/kamranayub/zVbHz/3/

バーは私の目的のために流動的である必要があるので、ピクセル幅は機能しません。IE / Firefoxが問題を隠しているかどうか、Chromeが私に正直であるかどうかはわかりません。

あなたがそれを理解できない場合、プログレスバーの流動的なセットのための代替案はありますか？

4

3 に答える 3

1

私はあなたの問題を見ます。すべてのパーセンテージを同じように丸めていると思います。したがって、それらを並べてフロートさせると、全幅に顕著な変化があります。

合計誤差を最大1pxに保つために、丸め誤差を補正するブラウザーに依存するのではなく、すべての右端がメインコンテナーから定義され、最後の端が右端に接触していることを確認します。これをチェックしてください：

http://jsfiddle.net/9nZYt/1/

.progress {
    position:relative;
    border: 1px solid black;
    box-sizing: border-box;
}
.progress .bar {
    position:absolute;
    left:0;
    border-right: 1px solid white;
}
.progress .bar:first-child {
    border-right:none;
}

.progress .bar.bar-remaining {
    filter: none;
    background: red;
}

と

<div class="progress">
    <div class="bar bar-remaining" style="width: 100%"></div>
    <div class="bar bar-remaining" style="width: 75%"></div>
    <div class="bar" style="width: 50%"></div>
    <div class="bar" style="width: 25%"></div>
</div>

マークアップの幅や特別なクラスをハードコーディングする代わりに、CSSのn番目の子セレクターを使用して個々のdivをターゲットにすることができます。

しかし、それでも私の意見では少し醜いので、丸みを帯びた角を再び正しく見せるには少し遊ぶ必要があります。

HTML5 Canvasに描画し、このhtmlベースのバージョンをフォールバックとして使用するのはどうですか？

編集：私はブートストラップについて何も知りませんが、うまくいけば、これはまだ適用可能です！

于 2012-06-08T15:44:14.147 に答える
0

問題は、プログレスバーのサイズが原因です。その幅はであり、その中に20％の幅514pxがある5秒があります。したがって、各内部のdiv幅はであり、小数値を省略しているだけです。プログレスバーの幅を指定して、赤いボックスの右マージンを削除してみてください。div514px/5 = 102.80px515px

div編集1：プログレスバーの幅が内側のsの数の乗算になるようにする必要があります。

于 2012-06-08T15:48:49.060 に答える
-1

パディングとマージンをゼロに設定します。それはあなたが見ているギャップを修正するはずです。

于 2012-06-08T15:31:19.093 に答える