CSS 背景画像のズレを回避
更新日: 2009.4.3
CSSを使ってセンタリング・レイアウトを行った場合、ウィンドウのサイズによっては背景画像とセンターに配置するブロックにズレが生じる事があります。 デザインによっては下図右のように縦のラインにブロックが重なってしまうことがあります。この現象は主にInternet Explorerでみられます。
回避方法
この現象を回避するには、bodyタグに対して、『padding-left: 1px;』を適用することで中央に配置すべきブロックのズレを矯正します。
ただし、正常に表示されるブラウザを除外して適用しなければなりません。
2008. 9.24 加筆
Firefoxなどのブラウザでもバージョンによっては背景画像がズレる現象が確認されています。 Firefoxの場合、『padding-right: 1px;』で回避できるようですが、これ以外にも全てのブラウザに対応するためには、CSSハックやJavascriptなどを駆使する必要があるかも知れません。
それよりも別の方法で背景画像を配置することを考えた方が手っ取り早く解決できそうです。
[PR]
(X)HTML + CSSでのコーディング依頼は愛知県豊田市のプラス・ファイブまでお気軽にお問い合わせください。