IE8ではbackground-sizeプロパティが適用されない
ある画像の背景として、特定の高さに表示されて欲しいボーダー画像を設定したんだけども、IE8で確認したところきちんと表示されず、原因はbackground-sizeによるものだとわかった。
background-sizeプロパティはcss3で追加されたプロパティのようで、IE8以下では残念ながら適用されないらしい。
IE6やらIE7で表示されないのは無視するとしても、IE8で表示されないというのは少々厳しい。
OSのシェア状況を見たところ、XPサポート終了1ヵ月前だというのに、IE8のシェアは20％を超えている。どうなってんだ。
余談だが、Operaのシェアは約1%で、IE7単独シェア、IE6単独シェアの両方に負けている。どうなってんだホントに。
ともかく、別の方法で表示する努力が求められることになったわけで、ポチポチ検索開始。
サジェストに出るくらい皆さん困ってらっしゃるようなのだが、単純な解決法はどうも無い感じ。
jQueryを使って云々というのが本命だが、この程度で使うのもなぁと躊躇し、やり方自体を見直すことに。
現状のコードは、
<!-- html --> <div id="head"> <img src="title.jpg" /> </div>
/* css */ #head { background-image: url("head-bg.jpg"); background-size: contain; }
という感じ。
修正案はimgを二つ重ねる方向でやってみる。
<!-- html --> <div id="head"> <img src="title-bg.jpg" class="title-bg" /> <img src="title.jpg" class="title" /> </div>
/* css */ #head { position: relative; } .title-bg { position: absolute; height: 100%; width: 100%; } .title { position: relative; width: 100%; }
無事動作！
なんで上手く行ったのかは露程も分かりやせん。
保存からのリロードが完全に運ゲーと化してる糞コーディングゲー爆誕。
positionプロパティの使い方が肝っぽいんだけど、なんで.titleの方はrelativeじゃないと動かないのか、サッパリ分からない……。
発達した科学は何とやらって言うけど、htmlとcssも結構そんな感じがする個人的に。
まあ、動いたからいいや。
