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

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

IE8では禁止

• nth-child
  (IE9なら可)
  対応状況: http://caniuse.com/#feat=css-sel3
• calc()
  (IE9でもダメ)
  対応状況: http://caniuse.com/#feat=calc
• <header>,<footer>などのHTML5のタグ
  対応状況: http://caniuse.com/#feat=html5semantic
  ただし、「html5shiv」を読み込めば使用可能 (参考: html5shivの検証)

IE8でもOK

• display: table;
  対応状況: http://caniuse.com/#feat=css-table
• display: inline-block;
  対応状況: http://caniuse.com/#feat=inline-block
• box-sizing: border-box;
  対応状況: http://caniuse.com/#feat=css3-boxsizing

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