1

私は使用しています：

body {
  background:url('../img/wide.jpg') center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 10%;
  color: #fff;
}

1pxただし、ブラウザーの右側に小さな線があり、それをカバーできないようです。Opera、FF Dev、Chrome で自分のサイトをローカルでテストしましたが、すべて同じ問題でした。

何か不足していますか？

4

3 に答える 3

1

私の推測では、これはコンテナーのサイズがピクセル間にあるため、ブラウザーの描画エラーであると考えられます。コンテナが正確なピクセル幅で設定されておらず、パーセンテージなどを使用している場合 (またはブラウザでズームしている場合や Retina ディスプレイを使用している場合)、描画時にピクセルの端にぶつかって切り上げられている可能性があります。背景画像を描画するときは四捨五入します。ブラウザ ベンダーにバグ レポートを提出する価値があるかもしれません。

回避策は、(通常の境界ではなく) ボックスの影を挿入することです。1 ピクセルのインセット ボーダーは、背景画像に重なります (一方、ボーダーは、背景画像を各方向から 1 ピクセル押し込むだけです)。これはサブピクセルのブラウザー ペイントの問題であるため、奇妙な境界線が 1 ピクセル以上ずれることはありません。

box-shadow: inset 0px 0px 0px 1px gray;

本当の解決策ではありませんが、見栄えが良くなり、ブラウザーのクロムに溶け込む可能性があります。

于 2017-01-10T21:28:27.020 に答える