実験室(実験レポート一覧) > 実験レポート || アットウィズ -Webシステム制作-

デザイン
企画
画像処理
DynamicHTML
HTML，CSS
JavaScript
Movable Type
WordPress
XOOOPS
XSLT
Flash，
ActionScript
Silverlight
Perl
PHP
VisualBasic
SQLServer
MySQL
Oracle
PostgreSQL
その他DB
サーバ関係
モバイル

各コンテンツは、弊社で調査及び実験の結果に基づくものですが、制作環境などの要因により、所定の結果が得られない場合も考えられます。また、掲載内容の使用あるいは信頼性に関連して生じる直接的、間接的、派生的な損失または損害に関して、一切責任を負いません。あらかじめご了承ください。

<< 実験レポート一覧へ

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

あれ～？おかしいわね。

Bさん、どうしたの？

CSSで背景画像をセンターによせて表示したのだけど
WinのIEで見ると、なぜか1pxずれてしまって・・・
（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と他のブラウザでは背景画像のセンターよせをする際、ウインドウの幅と背景画像の幅の差が奇数になった時の端数の処理が異なっているようなのじゃ。
今のソースのままウインドウの幅を少し調整してみなさい、
ずれないで表示される場合もあるはずじゃ。

あら、本当！
同じソースなのにウインドウの幅を調整したら、ずれてない。
（WinのIEでご覧ください）

以前ずれていなかったというのは、Bさんが確認した時のウインドウの幅では端数が出ていなかった為じゃろう。
つまりはこういうことじゃ。

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

奇数の場合の処理方法の違いでずれが発生してしまうのじゃ！

同じソースで同じ環境なのに違って見えるなんて。。。

そうじゃな、バグに近いものかもしれん。
じゃが、さすがにWinのIEを切り捨てるなんて事はできないから対処せねばな。

うーん、対処が大変そうだなぁ。これは。。。

ワシが考えた簡単な対処方を教えてやろう。
（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

（文責：塩谷）

<< 実験レポート一覧へ