0

ローディングバーのcssやhtmlを微調整するのを手伝ってくれませんか。現在のローディング バーには、現在 2 つの問題があります。

1 つは、境界線の左右の外側のバーから余分な影が出ていることです (適切にズームすると、境界線の半径がピクセル化されているように見えます)。とbox-shadowの両方のボックス シャドウ プロパティを削除すると、それが存在しないため、それが の問題であることはわかっています。#progress#buffer

余分な影のスクリーンショット

もう1つは非常にマイナーですが、本当に私を悩ませています。プログレス/バッファ バーがロードを開始する (変更style="width:0.4%") とき、半径を持つ div のフォームはコンテナの外に出ます:

div がコンテナーの外に出る

私はそれができるoverflow:hiddenことを知っています（私はすでに で行っています）が、非表示にしたくない#loading_bar_containerと思います（これには、2つのバーを1つの位置に配置し、互いに重ね合わせる必要があるという絶対的な原因が必要です）。（バーが1つしかないため）を削除し、 と を削除するとposition:absolute、必要なシナリオが得られます。#bufferloading_barposition:relative#progressposition:absolute

ここに画像の説明を入力

コードのjsfiddle フラグメントをここに追加して、それで遊ぶことができるようにします。

乾杯！

PS: タグは loading-bar であるべきだと思いますが、新しいタグを作成できないので、progress-bar として追加します。

編集:このテストは Chrome で行いましたが、@Oriol は FF でうまく機能すると述べています。確認したところ、FFは希望どおりに表示されます。Safariで確認したところ、Chromeと同じように表示されました。したがって、これまでのところ、この質問は Chrome と Safari に関するものです。IEで確認していません（怖い）。

4

1 に答える 1

2

が原因のChromeのバグのようposition:relativeです。

http://jsfiddle.net/VeJNt/2/とhttp://jsfiddle.net/VeJNt/3/を比較してください

その後、あなたは使用することができます

#progress {
    margin-top:-8px;
}​

position:relativeそれらとの代わりにposition:absolute。

こちらをご覧ください：http：//jsfiddle.net/VeJNt/4/

しかし、なぜあなたはとの両方を持っているのloading_bar_containerですloading_barか？

コードを単純化する必要があると思います：http：//jsfiddle.net/VeJNt/5/

編集：

バーの数に依存しない、より一般的なコードが必要な場合は、次を使用できます。

#loading_bar>div {
  border-radius:7px;
  height:100%;
  width:0%;
  margin-top:-8px;
}
#loading_bar>div:first-child {
  margin-top:0;
}

そして、各バーにbackgroundとを設定するだけです。box-shadow

ここでそれを参照してください：http：//jsfiddle.net/VeJNt/6/

マージンを設定すると、-8px、-16pxに設定してposition:relative設定している場合とは異なるため、累積的ではありません（2番目のバーに-8px、3番目のバーに-16px、...） 。top

要素に設定margin-top:10pxすると、10ピクセル下になりますが、次の要素と重なることはありません（以降のすべての要素も10ピクセル下になります）。

次に、margin-top:-8px2番目のバーに設定すると、8ピクセル上になりますが、次のバーとの間にスペースは表示されません（以降のすべてのバーも8ピクセル上になります）。次に、margin-top:-16px3番目のバーに設定する必要はありません。2番目のバーのためにすでに8ピクセル上がっているため、必要なのは-8ピクセルだけです。

于 2012-08-29T20:31:22.987 に答える