はじめてまともに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激オモ。