読者です 読者をやめる 読者になる 読者になる

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も結構そんな感じがする個人的に。

まあ、動いたからいいや。


参考
IE8が4年間連続トップ - 2月ブラウザシェア | マイナビニュース