3

私の Web ページは幅 960px の 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でのみ発生します。

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

4

6 に答える 6

3

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

于 2008-09-22T05:08:00.313 に答える
2

（最も）一般的な問題は、コンテナが偶数であるのに対し、背景画像の数が奇数であるということです。私は最高の英語で、ブラウザがあなたの写真をどのように配置したかについても説明する記事を書きました。ここでそれをチェックしてください。

于 2008-10-24T15:34:04.100 に答える
2

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

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

カルロ・カポカサ、Travian Games

于 2009-10-09T15:52:06.897 に答える
1

jQueryでこれを解決できました：

$(document).ready(function(){
 $('body').css({
  'margin-left': $(document).width()%2
 });
});
于 2011-01-20T13:06:09.463 に答える
0

同じ背景画像でラッパー 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; }

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

于 2013-06-22T19:18:26.820 に答える
0

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

背景を中央に配置するには、ビューポートよりも広い背景画像が必要です。幅2500pxの背景を使用してみてください。ブラウザは、表示可能な画像の部分を中央に配置するよう強制されます。

それがあなたのために働くかどうか私に知らせてください。

于 2012-05-23T18:09:14.527 に答える