中央の背景画像が 1px ずれています

StackOverflow https://stackoverflow.com/questions/113253

  •  02-07-2019
  •  | 
  •  

質問

私の Web ページは幅 960 ピクセルの DIV 内にあります。次のコードを使用して、この DIV をページの中央に配置します。 

html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}

html/bodyの背景画像をページの中央に並べて配置する必要がありますが、実際にはそうなりますが、ブラウザで表示可能なペインの幅が奇数のピクセルの場合、中央の背景と中央のDIVが整列しません。 。

これはFFでのみ発生します。

誰か回避策を知っていますか?

役に立ちましたか？

解決

はい、それは既知の問題です。残念ながら、div と画像の幅を修正するか、スクリプトを使用して stye.backgroundPosition プロパティを動的に変更することしかできません。もう 1 つのトリックは、CSS クラス定義に式を追加することです。

他のヒント

背景画像の幅を奇数ピクセルにすると、Firefox では問題が解決することがわかりました。

パディングの設定:0px 0px 0px 1px;IEの問題を修正しました。

カルロ・カポカサ、Travian Games

(最も) よくある問題は、背景画像の番号が奇数であるのに、コンテナの番号が偶数であることです。私はブラウザがあなたの写真をどのように配置するかを説明する記事を私の精一杯の英語で書きました: ここでチェックしてください.

jQuery を使用してこれを解決できました。

$(document).ready(function(){
 $('body').css({
  'margin-left': $(document).width()%2
 });
});

私も同じ問題を抱えていました。

を入手するには、 背景中心, が必要です。 ビューポートよりも広い背景画像. 。背景を使ってみる 2500ピクセル 広い。これにより、ブラウザは表示可能な画像部分を強制的に中央に配置します。

うまくいくかどうか教えてください。

同じ背景画像を持つラッパー div を作成してみてはどうでしょうか。

body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }

ラッパーには偶数の番号があり、背景はどの画面サイズでも同じ位置を維持します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top