REDLINE MAGAZINE | overflow を使用したボックス背景のこと

overflow を使用したボックス背景のこと

幅、高さ、overflow:auto;を指定したボックスの背景に画像を指定した場合、IEでだけ背景の表示が変。やりたかったことは固定サイズのボックスに背景画像を指定して中身がそのボックスの高さより溢れたらスクロールしてほしいという内容。とりあえずサンプルあげてみます。

>>サンプル1(背景を指定してno-repeatを指定)

【CSSソース】

#sample{
	width:400px;
	height:150px;
	background:url(img/xxx.jpg) no-repeat;
	overflow:auto;
	border:1px solid #f00;
	margin:20px auto;
	}

Firefox、NN、Opera、Safari(win)では意図どおりにボックスがスクロールしても背景がリピートせずに固定される。でもIE6、7だとスクロールに合わせて背景も動いちゃう。下記はそのキャプチャ。

もしかして私間違って覚えてた？

ボックスに幅、高さを指定して背景を入れる場合、背景をリピートさせないためにはno-repeatだけでいいと思ってたけどoverflow:auto;を使う場合、もしかして「fixed」とか入れなきゃならなかった？とか思って入れてみた。

>>サンプル2(背景を指定してno-repeatとfixedを指定)

【CSSソース】

#sample{
	width:400px;
	height:150px;
	background:url(img/071212_01.jpg) no-repeat fixed;
	overflow:auto;
	border:1px solid #f00;
	margin:20px auto;
	}

IE6ではうまくいったけど、おおっと・・・他ブラウザで背景が飛んでいってる。ディスプレイを小さくしてみたら背景の一部がボックスの中に表示されるということは、「fixed」で固定される基準点が違うっぽいなと思ってググってみたらこちらのページを発見。

>>スタイルシート［CSS］/ボックス/背景画像をスクロールさせない - TAG index

上記ページの下のほうの「fixedを指定する場合の注意点」という項目に各ブラウザごとの基準となる位置がまとめられてました。

ふむふむ。IE6ではその要素に対して背景が固定される(だから上のサンプル2ではうまくいってるのね)が、他ブラウザ(IE7含む)ではウィンドウを基準に固定するから求める結果が得られない、と。「fixed」ってhtmlやbody要素向けの指定なんすね。今まであんまり使う機会なかったから知らなかったよ・・・とほほ。

てかweb標準の教科書にもちゃんと書いてあった。その要素に対して固定されるのではなく、ブラウザの表示領域に対して固定される点に注意。(P.212より引用) うむ。勉強になりますた。

ならばどうしてくれようか。

とりあえずIEさんが個性的なのはよく分ったけどシェア的に無視できる相手でもないので、とりあえずIEさんには上のとおり「fixed」を指定して固定を保ってもらおう。その他のブラウザについては子供セレクタでも使って「no-repeat」で表示する。

IE7も中途半端にうっとーしい奴だった

これでOKだと思ってたらIE7先生もまたクセモノだった。この人「fixed」を指定した際は他ブラウザに挙動を合わせて表示領域を基準にするくせに、「no-repeat」だけだとIE6と同じように背景までスクロールしやがる。八方美人すぎるぞ。

IE7で「fixed」を指定した上で位置固定の指定でも入れようかとも思ったけど、表示サイズによって変わるやんね。リピートさせられる画像なら問題ないんだけど上に置いたサンプルみたいにリピートしがたい画像なのでビミョー。・・・どうしたらいいの？まじで。IE6と他ブラウザ向けに指定を振り分けた後、IE7のために大きめの背景画像を用意して「no-repeat left bottom」とかで表示位置をコントロールするくらいしか思いつかないんだけど。なんかスマートな方法ないかなぁ・・・。根本的に何か間違ってるのかな。(※今使ってるIE7、スタンドアローン版なので、正規版では挙動が違うかもです。)

2007年12月12日 16:15 | Red | パーマリンク