はじめてのIE対応(CSS)

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

事前にやっていたこと

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

発生した事象

IEでみた時に

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

対応

browserstackを使ってIEでの表示を確認
↓
検証モードを開き、直接スタイルを当てて挙動を確認
↓
IEだけに適用するためのメディアクエリを書き、その中にスタイルを追加する

@mediaalland(-ms-high-contrast:none){.sidebar{.title{margin-right:20px;}svg{height:30px;}}.event-list{.wrap{background:green;}}}

感想

browserstack激オモ。

参考

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