IE9で背景がずれる現象がこれで直った

時間いじり倒したが、いうことをきかない
借り物のテンプレ。
IE9で表示確認されていないCSSだった、ということにカスタマイズの終盤で気づいた。

<div>~</div>の中に<ul>が入っている仕様。
div要素の背景が、Firefoxだと問題なし、IE9だと15pxくらい上にずれる。
しかし、ul要素はIEでも正しい位置で表示されている。
ためしに<ul>~</ul>を削除してみたら、FirefoxでもIE9と同じだけ背景がずれてしまった。
なんだろうこれ。
思いつく限りのタグを入れたり外したり、数値を変更したりしてみたが、div要素がほとんど動かない。

決策は驚くほどシンプルだった
初めのCSSは
background:url(http://~) no-repeat bottom;
となっていた。

これを
background:url(http://~) no-repeat;
background-position: bottom;
background-attachment:fixed;
に変更したところ、IE9でも正しく表示されるようになった。
位置のXY軸をピクセルで指定してフィックスにしたときはダメだったのに、bottomでよかったとは。


で、今の今までディブと読んでいたdivは、ダイヴと読むのが正しいと判明。
【追記】
divisionの略なので、やっぱりディブのほうが適切なんじゃないかと思うしだい。
テキトーなこと書いてしまってごめんなさい。

0 comment :

コメントを投稿