• 実験室
  • 実験室について
  • 実験レポート一覧
アイコンの説明
  • デザインデザイン
  • 企画企画
  • 画像処理画像処理
  • DynamicHTMLDynamicHTML
  • HTML,CSSHTML,CSS
  • JavaScriptJavaScript
  • Movable TypeMovable Type
  • WordpressWordPress
  • XOOPSXOOOPS
  • XSLTXSLT
  • Objective-CObjective-C
    iPhoneネイティブアプリ
  • Flash,ActionScript Flash,
    ActionScript
  • SilverlightSilverlight
  • PerlPerl
  • PHPPHP
  • VisualBasicVisualBasic
  • SQLServerSQLServer
  • MySQLMySQL
  • OracleOracle
  • PostgreSQLPostgreSQL
  • その他DBその他DB
  • サーバ関係サーバ関係
  • モバイルモバイル
各コンテンツは、弊社で調査及び実験の結果に基づくものですが、制作環境などの要因により、所定の結果が得られない場合も考えられます。 また、掲載内容の使用あるいは信頼性に関連して生じる直接的、間接的、派生的な損失または損害に関して、一切責任を負いません。あらかじめご了承ください。
Valid XHTML 1.0 Strict Valid CSS!

実験レポート

  • 【中級】 WinのIEでCSSを用いて背景画像をセンターよせで指定した際、1pxずれてしまう 

    掲載日:2006.10.10
  • CSS

あれ〜?おかしいわね。
Bさん、どうしたの?
CSSで背景画像をセンターによせて表示したのだけど
WinのIEで見ると、なぜか1pxずれてしまって・・・
新しくWindowが開きます サンプル1 (WinのIEでご覧ください)
[CSS]
body{ 
	margin:0px; 
	padding:0px;
	background-color:#000000;
	background-image:url(images/background150.gif); 
	background-position:center; 
	background-repeat:repeat-y; 

	text-align:center;
} 

#main{
	width:150px;
	margin:10px auto 10px auto;
	background-color:#FF00FF;
	text-align:center;
}

[HTML]
<body>
	<div id="main">
	背景画像の幅は150px
	</div>
</body>
</html>
あ、ほんとだ。1pxずれているみたいだね。
他の環境では、ずれないの?
ええ、WinのIEだけずれてしまうの。
以前確認した時は、ずれていなかったはずなんですけど・・・
悩んでおるようじゃな。
background-image:url();
background-position:center;
で背景画像を設定した時、WinのIEだと1pxずれてしまうわけじゃな。
そうなんです。
気がついたら、ずれてしまっていて。
これはワシの経験上じゃが、WinのIEと他のブラウザでは背景画像のセンターよせをする際、 ウインドウの幅と背景画像の幅の差が奇数になった時の端数の処理が異なっているようなのじゃ。
今のソースのままウインドウの幅を少し調整してみなさい、
ずれないで表示される場合もあるはずじゃ。
あら、本当!
同じソースなのにウインドウの幅を調整したら、ずれてない。
新しくWindowが開きます サンプル2(ソースはサンプル1と同様) (WinのIEでご覧ください)
以前ずれていなかったというのは、Bさんが確認した時のウインドウの幅では端数が出ていなかった為じゃろう。
つまりはこういうことじゃ。

ウインドウの幅と背景画像の幅の差

奇数の場合の処理方法の違いでずれが発生してしまうのじゃ!
同じソースで同じ環境なのに違って見えるなんて。。。
そうじゃな、バグに近いものかもしれん。
じゃが、さすがにWinのIEを切り捨てるなんて事はできないから対処せねばな。
うーん、対処が大変そうだなぁ。これは。。。
ワシが考えた簡単な対処方を教えてやろう。
新しくWindowが開きます サンプル3 (WinのIEでご覧ください)
[CSS]
body{ 
	margin:0px; 
	padding:0px 0px 0px 1px;
	background-color:#000000;
	background-image:url(images/background150.gif); 
	background-position:center; 
	background-repeat:repeat-y; 

	text-align:center;
} 

#main{
	width:150px;
	margin:10px auto 10px auto;
	background-color:#FF00FF;
	text-align:center;
}

[HTML]
<body>
	<div id="main">
	背景画像の幅は150px
	</div>
</body>
</html>
ウインドウの幅を調整してもずれませんね。
でも、なぜですか??
ちょっと強引じゃが1px分左に余白を入れることで、ずれた分を修正しているのじゃ。 ただし、正常に表示されるはずのブラウザで見るとずれてしまうからWinのIEにだけ適用してやらねばだめじゃ。
強制的にずれを修正してやればよいので、背景画像を切り替えるといったパターンでもいけるじゃろうな。
なるほど。
あとはWinのIEの場合とその他の場合で、CSSをわければいいんですね。
そういうことじゃ。
ただもっとスマートな方法があるかもしれん。あったら是非とも教えてくれ!
【確認環境】
 [WindowsXP Pro SP2]
  IE6.0,Firefox1.5
 [Windows2000]
  IE5.5
 [Mac OSX 10.4]
  IE5.2,safari2.0

(文責:塩谷)

このページのトップへ