[全体] [技術メモ] 各一覧の該当ページへ

背景ずれ対策その２

[技術メモ] 2009年4月10日(金曜日) 0:12

「固定幅＋中央寄せ」時の背景ズレ対策を半年以上前に書きました。
背景画像がブラウザをリサイズすると1pxうねりますよね？
その補整に関する記録です。その際は、偶数幅のものをセンタリングするからうねるのだと思っていたのですが、よくよく考えてみると、奇数でもうねるんですよね。他にも色々と気になり、もう少し突っ込んで検証してみました。

検証用素材HTMLをご覧ください。

奇数幅でもうねります

センタリングでは、
ブラウザ幅が偶数幅の時は奇数幅画像がずれ、
ブラウザ幅が奇数幅の時は偶数幅画像がずれます。
1px違いますので当然です(ノ∀`)

ずれ方が違う……

msieもgeckoもoperaもwebkitも……リサイズで黒と赤の線がチラチラしますね(・ω・)
よくよく考えてみました。

余ったマージンを左へ送る場合

余ったマージンを左へ送る場合
ブラウザ幅が偶数の時に右に黒線が出ます。

余ったマージンを右へ送る場合

余ったマージンを右へ送る場合
ブラウザ幅が偶数の時に左に黒線が出ます。

つまり、ブラウザ幅が偶数の時と奇数時で、余分マージンを送る側を変えるレンダリングエンジン以外は、リサイズで黒と赤の線がちらつくことになります。
幸か不幸か、現状のメジャーなレンダリングエンジンは全てちらつきます。

各ブラウザの特徴

IE6,7だけ（６未満は無視）が左に余分マージンを送るようです。他は皆右へ。
IE6.7以外は、偶数と奇数の画像を混在させない限り、ずれな……ん？
いや、それって偶数と奇数がずれるのであって、バックグラウンドとフォアグラウンドがずれる原理とは関係ありませんよね＼(^o^)／

フォアグラウンドのずれ方を見る

ブラウザ幅に限らず線と画像が合う、operaとwebkitは、問題ありません。
これらは、偶数と奇数の画像を混在させない限りずれないと言うことです。
問題は、msie6,7とgecko。
マージン送り方向という考え方では、どうも、バックグラウンドとフォアグラウンドで逆にマージンを送っているようです。

msie（6,7）

バック　余分マージン左送り
フォア　余分マージン右送り

gecko

バック　余分マージン右送り
フォア　余分マージン左送り

msie8,opera,webkit

バック　余分マージン右送り
フォア　余分マージン右送り

対策

結局、前と大差ありませんorz

  • IE6.7は背景画像の右端に１ピクセル足す
  • FireFoxは背景画像の左端に１ピクセル足す
  • 奇数幅でそろえても無駄＼(^o^)／

動的にjQueryで内幅を変えるのも面白いかなと考えていたのですが、
ブラウザ間の「ずれ方」の差異は幅いじりだけでは無理のようです。

具体的に

標準モード

#main {
	background:url(main-bg.gif) repeat-y center 0;
	_background:url(main-bgie.gif) repeat-y center 0;/* IE6 センタリング補正 */
	*background:url(main-bgie.gif) repeat-y center 0;/* IE7 センタリング補正 */
}
#maincontainer:-moz-read-only {
	background:url(main-bgff.gif) repeat-y center 0;/* Mozilla センタリング補正 */
}

互換モード

<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
</head>
#main {
	background:url(main-bg.gif) repeat-y center 0;
	_background:url(main-bgie.gif) repeat-y center 0;/* IE6,7 センタリング補正 */
}
#maincontainer:-moz-read-only {
	background:url(main-bgff.gif) repeat-y center 0;/* Mozilla センタリング補正 */
}

で動くっぽいです。
どうもIE8がくせ者です。
互換モードでは新セレクタが機能しない((((；ﾟДﾟ))))
互換モード時にはヘッダに、

<meta http-equiv="X-UA-Compatible" content="IE=8">

を追加したら上手くいきました。
アンダースコアハックやらスターハックが無効化されるようです。

コメント (0)

トラックバック URL :

コメントをどうぞ

表示アバターはGravatarsです。
メールアドレスに対してアバター画像を登録できます。