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

すたらブログ

文系Webプログラマの備忘録

CSS: IE8もサポートする場合の注意点

ウェブサイトを制作する際、まだまだIE8をサポート対象に含める場合があります。
使って良いもの・ダメなものを自分用に整理しておきます。

IE8では禁止

IE8でもOK

background-size: cover;について

background-size: cover;はIE8では対応していませんが、下記で代用できます。
ただし、縦横比は維持されないので、画像と要素の縦横比が極端に異なると、背景画像が歪んで表示されます。

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='呼び出し元のHTMLから見た、画像ファイルへのパス', sizingMethod='scale')";
/*
【例: 下記のような構成の場合】
├ index.html
├ css/
│  └ common.css
└ img/
   └ back.jpg
*/

body {
  background-image: url("../img/back.jpg");
  background-size: cover;
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/back.jpg', sizingMethod='scale')";
}

参考: https://developer.mozilla.org/ja/docs/Web/CSS/background-size