今さら!? Internet Explorer対応を求められたときに気をつけるCSS記述ポイント

投稿日 2025年8月29日
著者 HITMARKET
カテゴリーおすすめ
カテゴリーホームページ

すでにMicrosoftの公式サポートが終了し、多くの現場で対応対象から外されているInternet Explorer（IE）。
にもかかわらず、「うちの社内システムはまだIE11なんです……」といった理由でIE対応を強いられる案件、まだあります。

今回は、IE対応をどうしても避けられない場面でのCSS記述の注意点や代替手段を紹介します。

🚫 1. `flexbox`の罠：IE11は仕様が中途半端！

flexは一応使えるが、挙動が異なる
自動サイズ調整が効かないケース多発（min-heightやauto）
flex-growやflex-shrinkの動きに注意

✅ 対策：

/* IEでは明示的にwidth指定すると安定する */
.flex-item {
  flex: 1 1 auto;
  min-width: 0;
}

🚫 2. `grid`は原則非対応（IEのは旧仕様）

IE11にはプレフィックス付きの**旧式のCSS Grid（-ms-grid）**が一部入っていますが、
モダンなGridレイアウト（display: grid）はまともに動きません。

✅ 対策：

どうしても使いたい場合は @supports で切り替え
IEでは float や inline-block にフォールバック

@supports (display: grid) {
  .container {
    display: grid;
  }
}

@supports not (display: grid) {
  .container {
    display: block;
    float: left;
  }
}

🚫 3. `var(--color)`などのCSSカスタムプロパティは使えない

IE11ではCSS変数（カスタムプロパティ）未対応です。

✅ 対策：

SassやLESSなどのプリプロセッサで事前に変数展開して対応

$main-color: #3366cc;
.button {
  background-color: $main-color; // IEにも対応
}

🚫 4. `object-fit`, `position: sticky` も非対応

object-fit: cover; → IEでは無視される
position: sticky; → 固定されずスクロールされてしまう

✅ 対策：

画像トリミングは background-image で代替
stickyな挙動は position: fixed で近い動作を再現するなどの工夫を

🚫 5. `::before`や`::after`への`flex`や`grid`の使用

IEでは疑似要素に対するflex指定が不安定または効かないことがあります

✅ 対策：

レイアウト用途に疑似要素を使わない
装飾用にとどめる（アイコンや装飾線など）

⚠ その他よくある罠

記述例	問題点（IE）	解決策
`calc()`	単位の混合でバグることあり	単位を揃える、予測値を明示
`transform`	子要素のクリックが無効化されることあり	`pointer-events`指定で対応
`filter: blur()`	未対応	画像加工はあきらめる／Photoshopで前処理
`scroll-behavior: smooth;`	未対応	JSで代替実装を用意する