IE背景消え対策
- 2011.08.25 Thursday
- 18:39
mootoolsとjQueryを一緒に使う方法でめでたく内容量に差があるボックスの高さをそろえるは完成したのだけど、IEで見てみたら、いろんなとこで背景やらボーダーやら消えまくり…。
ああーまたかよー、とがっくり。
IEはfloat使うと高確率で、ボックスの背景が消える。それも一回読んで、一瞬表示されるのに全部読み込みが終わると見えなくなってる、というなぞIE仕様。
参考サイト:IE6で背景が表示されない際にチェックすること
前にもやったけど、結局背景・ボーダーが消える要素に
position: relative;
をつけてやれば、ほとんど解決する。その要素にposition使ってなければだけど。
背景・ボーダーが消える要素にwidth指定という手もあるのだが、
floatを使って、入れ子のボックスにpadding、marginなんかを指定している場合、
すごくややこしいことになるので、position: relative;が使えないときの最後の手段にしてます。
しかし
position: relative; とそのまま書くのは、どうも釈然としない。IEにしか必要ないんだからなおさら。
というわけで
参考サイト:CSSハック一覧 -- IE, Firefox, Safariなどなど:
を参考にIEハックで書くことに。
position/*¥**/: relative¥9;
これでIE7,IE8のみに適応される。IE6以下はもう無視w。
こう書いておけば実際に必要なpositionと区別できるのでわかりやすいです。
ちまちまと各要素にIEハックをつけて、ようやく完成しました。へろへろ。
ああーまたかよー、とがっくり。
IEはfloat使うと高確率で、ボックスの背景が消える。それも一回読んで、一瞬表示されるのに全部読み込みが終わると見えなくなってる、というなぞIE仕様。
参考サイト:IE6で背景が表示されない際にチェックすること
前にもやったけど、結局背景・ボーダーが消える要素に
position: relative;
をつけてやれば、ほとんど解決する。その要素にposition使ってなければだけど。
背景・ボーダーが消える要素にwidth指定という手もあるのだが、
floatを使って、入れ子のボックスにpadding、marginなんかを指定している場合、
すごくややこしいことになるので、position: relative;が使えないときの最後の手段にしてます。
しかし
position: relative; とそのまま書くのは、どうも釈然としない。IEにしか必要ないんだからなおさら。
というわけで
参考サイト:CSSハック一覧 -- IE, Firefox, Safariなどなど:
を参考にIEハックで書くことに。
position/*¥**/: relative¥9;
これでIE7,IE8のみに適応される。IE6以下はもう無視w。
こう書いておけば実際に必要なpositionと区別できるのでわかりやすいです。
ちまちまと各要素にIEハックをつけて、ようやく完成しました。へろへろ。