AX
<   2012年 03月 ( 1 )   > この月の画像一覧
【CSS】bottom:0を指定しているのにできる隙間
前回に続いてまたしても隙間の話。
で、またよりよってIEの話。今回はIE6でもIE8でも事象が再現することを確認。
IEの不具合には困ったもんだ。

スタイルシートの bottom の設定をしたときの話。
詳細は書かないが、 bottom とは領域内の「下からの位置」を指定するための属性。

今回は bottom:0 を指定した時の話なので、一番下に隙間なく表示されることはず。
っていうことなんだけど、あのバグの宝庫であるIEではうまく動かず。
でも、今回のケースはかなりのレアケースだと思います。

■ コード
<div style="position:relative;width:200px;height:200px;border:1px solid black;background:#ccf;">
表示領域
<div style="position:absolute;width:80px;height:39px;bottom:0;border:1px solid black;background:#cfc;">
下に表示
</div>
</div>

■ 表示
表示領域
下に表示


■ IEの表示を再現
表示領域
下に表示




たしか上記コードでIEだと隙間ができたはずです。(家はMacなので確認できない。。。)
で、解決方法は下に表示したい要素の高さ、要するに height の下一桁を9にしないこと。
今回ならば 38pxでもいいし、40px でも指定しておけばOK。
ただ、39pxはだめだし、49pxもだめ。理由は謎。マイクロソフトにでも聞いてください(==;

このバグにも散々悩まされました。だって、指定する高さでバグが発生するなんて思わないでしょ!?
あまりにも特殊なケースだったからググってもこの事象で困っている人すらいなかったわ。
[PR]
by manodeldio | 2012-03-23 06:29 | プログラミング