LoginSignup
1

More than 3 years have passed since last update.

はじめてのIE対応(CSS)

Posted at

はじめてまともにIE対応をやったので書く。

事前にやっていたこと

PostCSSのAutoprefixerを使って、IE9まで対応できるようにベンダープレフィックスをつけていた

発生した事象

IEでみた時に

  • 背景色が適応されていない箇所が多数
  • height: autoの指定をしていたり、heightの値を書いていなかったところの高さが崩れる
  • 文字が切れてしまっている箇所がある

対応

browserstackを使ってIEでの表示を確認

検証モードを開き、直接スタイルを当てて挙動を確認

IEだけに適用するためのメディアクエリを書き、その中にスタイルを追加する

イメージ
@media all and (-ms-high-contrast: none) {
  .sidebar {
    .title {
      margin-right: 20px;
    }
    svg {
      height: 30px;
    }
  }
  .event-list {
    .wrap {
      background: green;
    }
  }
}

感想

browserstack激オモ。

参考

【CSS】IEのみに適用する、Firefoxのみに適用する、Chromeのみに… at softelメモ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1