はやく消え去ってほしいとWEB業界の誰からも思われているIEさん。日本ではまだまだ居座りそうなので、対応策の備忘録リストです。
目次
まずはIEユーザーの方へ
万が一、IEユーザーがこのページにアクセスされたときのために。
Googleが開発した世界で一番使用率が高いChromeをオススメします（Edgeでも構わないんですけど）。軽いし、表示崩れなんて起きませんよ？ この機会にブラウザの乗り換えなんてどうでしょうか？ 下記サイトからタダでダウンロードできます。
21.05.20追記： いよいよMicrosoftから2022年6月15日をもってIEのサポートを終了するとの発表が出されました! 日本のWEB制作業界大歓喜！
游ゴシック・游明朝の下に謎の余白ができる！
CSSハックで調整しよう！
CSSハックとは特定のブラウザで指定できるようにする記述のことです。モダンブラウザ化が進んだ最近では、もっぱらIE対応のために記述されます。
IE11対象のCSSハック 基本形
/* IE11表示用のCSS */
_:-ms-fullscreen, :root .selector {
property: value;
}19.08.28追記：IE10~11のCSSハック（_:-ms-input-placeholder, :root .selector）から、IE11のみのCSSハック（_:-ms-fullscreen, :root .selector）に変更しました。IE10はもう無視でいいですよね……。
IE11以外のバージョンおよびEdgeの各バージョンに対するCSSハックについて詳しく知りたい方は下記サイトを参照してください。
IEではfont-familyでメイリオを指定するパターンと、paddingの設定を調整するパターンがあるようです。
IE11のみメイリオに指定するCSSハック
例えばbodyでfont-familyを指定している場合、
/* IE11表示用のCSS */
_:-ms-fullscreen, :root body {
font-family: Meiryo, sans-serif;
}IE11のみpaddingの調整をする
paddingの設定で対応する場合、全体を調整かけてのは大変なので、見出し、ボタン、タグなど囲みがあってズレが目立つ部分を重点的に対応でいいと思います（とディレクターを説得する）。.selectorの部分にズレを調整した見出しやbuttonのclassなどを記述して、paddingを調整します。実際にIEで検証しながらの作業になるんですが、2px〜3pxほど下にズレして配置されるようにすると丁度いいと思います。
IE11とEdgeを対象とするCSSハック
こちらはEdgeにも効きます。2020年以降のEdgeはChromium版になってざっくり言うとChromeに近くなっています。以前では表示崩れが起きていた箇所が問題無くなるわけです。
/* IE11とEdge表示用のCSS */
_:-ms-lang(x)::-ms-backdrop, .selector {
property: value;
}ということは、逆にこのCSSハックが悪さをしている場合が出てきます。「以前は表示確認でOKだったのに、Edgeだけ表示がおかしくなってる……」という場合は、こちらを使用していないか確認してみるといいかもしれません。
Googleの日本語FONTがIEでは反映されない！
他のモダンブラウザではきれいなFONTになって表示されるのに、IEではアンチエイリアスの効いてないガビガビの文字に……。「GoogleさんがIEなんて相手にするわけないですもんね〜〜」で済ませたいところですが、さすがのGoogleさん、対応策を用意しております。
今は「早期アクセス」という名前は取っていますが、Google 日本語FONTと言うとこのサイトに行きがち（ここではさわらび明朝で話を進めます）。
そうではなく本家のGoogle Fontsに行って検索で探します。
headタグに記述するこのscriptをそのままコピーしたいところですが、
CUSTOMIZEタブをクリックしウインドウを切り替えます。
LanguagesのJapaneseをチェックします。
EMBEDタブから元のウインドウに戻ると、赤枠の部分が記述が変わっています。
これをコピーしてheadタグに貼り付けます。
こちらの記事で作ったデモページのBefore Afterが以下の通りです。
Before
普通に設定すると、IEではこの通りガビガビです。
After
上記のやり方でIE対応すると、（気持ちガビガビしていますが）指定したFONTが反映されています。Noto Serif JPも同じやり方でIE対応できます。
Flexboxが効かない！
中央揃え編
justify-contentとalign-itemsを使って要素の上下左右中央に位置させたい。でもIEではなぜか表示崩れ……。
このサイトはBootstrapを使っているので若干記述が違ってますが、下記の内容でDemoを作成しています。
<div>
<div>上下左右中央に</div>
</div>/* 親要素 */
div {
background:#DAD7CF;
height:150px;
display:flex;
justify-content:center;
align-items:center;
}
/* 子要素 */
div div {
background:#fff;
text-align:center;
width:200px;
margin:0 auto;
}Demo
Chrome等で見た場合はイメージ通りに上下左右に配置されますが、IEで見た場合は以下のキャプチャのようになってしまいます。
ここで悪さしているのは子要素のmarginです。つい癖でナチュラルにmargin付け加えてしまいますが、justify-contentとは相性が悪いようです。
これを削除したのが以下のDemoになります（Bootstrapなので、子要素のclassからmx-autoを削除しています）。
Demo
IEでも上下左右中央に配置されました。
下揃え編
複数カラム時に下に揃えたい。モダンブラウザなら特に悩むことなく実装できます。が、そこはIE。IEでだけ、長いセルに高さを合わせて画像が縦に伸びたりする場合。
下付きにさせたい要素をdivで包んで、そのdivにmin-height: 0%;を当ててあげると画像が縦に伸びず下に付きます。
FlexboxのIE表示崩れあるあるなんですが、崩れた状態を再現できませんでした🙁
横並び編
flex-basis
複数カラムをさっと横並びに配置したい。Flexboxの基本的な使い方ですね。
このカラムの横幅をflex-basisで指定するとIEでだけカラム落ちすることがあります。
この場合、同じ数値をmax-widthでも指定してあげるとカラム落ちしなくなります。普段からflex-basisとmax-widthをセットで記述する癖を付けるといいですね。
WordPressのビジュアルエディター投稿でカラムを作るとこの現象が起きます。しかも切り替えポイントが幅600pxというユニークさ。。コーダーが構築で使用するときは気を付けてチェックした方が良さげです。
flex-wrap:wrap;
便利なflex-wrap:wrap;もIE11では表示崩れが起きてしまいます。改行はされるのですが、親要素を突き破って幅広くなってしまいました。
改行したい段ごとにdisplay:flex;をかけたdivで分ける、floatで実装する、IEは切り捨てるなどの対応をしましょう。
縦並び編
画像の下に謎余白が……
ブラウザ幅を狭めたときに縦並びに切り替えたい。flex-direction:column;を当てれば簡単♪なハズが、なぜか子要素内の画像の下が広がってしまう事例がありました。
子要素にmin-height:0%;を当てたら謎余白は解消されましたが、どういう理屈で余白が発生していたのか今も謎です……。
とにかく縦並びにflex-direction:column;を使わない！！
レスポンシブ時の切り替えに便利でついつい使ってしまうflex-direction:column;ですが、前述の画像の下に謎marginといい、子要素になんらかの不具合が発生します。どうしても使いたい場合は、IEハックでIEだけdisplay:block;にするなど調整しましょう。
擬似要素と相性が悪い
親要素にdisplay:flex; justify-content: space-between;をかけて子要素を両端寄せにしたいときありますよね。
このとき子要素に擬似要素で装飾していると、うまくjustify-content: space-between;が効かないことがあります。IE対応で子要素を入子にして孫要素に擬似要素をかけるなど調整しましょう。
追記：親要素に擬似要素使ってても不具合発生しますね……。
Flexboxのバグ、その他
他にもいっぱいあるようです。
日本語でのバグ解説まとめは上記記事を参考になさってください。IE以外にもSafari、Edge、Firefoxでのバグ＆対処方法もまとまっています。
Gridレイアウトが効かない！
「これは便利！」と意気揚々とGridレイアウトを使ってみたものの、各ブラウザチェックの段階になってIE11で効いてないとガックリ……。あるあるですね。
上記の記事ではIE11で中央揃えになっていませんが、ベンダープレフィックスを付け加えると、
……中央揃えにならない！
すみませんが私CSS Gridレイアウトに明るくないので、詳しいサイトを参照してください。
calc関数で横並びしたいのにIEではカラム落ちした！
前述のFlexboxとも関連しますが、便利なcalc関数でもIEは一癖あります。
例えば、width: calc(100% / 3);と指定して3つ横並びにしたいとき、普通のブラウザなら端数切り捨てをするので幅100%に収まるのですが、IEはなんと端数切り上げをしてきます。結果、幅100%を超えてしまうのでカラム落ちしてしまいます。
割り切れる分には問題ないのですが、割り切れない場合はIEのみのCSSハックで調整しましょう。
/* IE11表示用のCSS */
_:-ms-fullscreen, :root .selector {
width: 33.33%
}transformでcalc関数が効かない！
そうです。transform: translateY(calc(-50% + 3px));こういう記述便利なのですが、IEでは効かないのです。
CSSハックで対応しましょう。
Twitterの埋め込みウィジェットが表示されない！
なんとTwitterではブラウザ対応からIEを切り捨てています（潔いですね）。
解決方法は、公式では無理みたいですね。。
どうしても！というなら、サードパーティーのサービスを利用するとか。下記、有料ですが。
CSSフィルターで画像に効果をかけたいのに効かない！
jQueryライブラリ「background-blur.js」を使う
なんとIEではCSSフィルターが効かないのです。そこで
background-blur.jsを使うか、IEユーザーはボカシ無きゃ無いで他のブラウザと比較しない限り気付きません！と言い張るかです。background-blur.jsを使う場合、CSSフィルターとではぼかしのかかり方が異なります。輪郭を軸にぼかしが入るCSSフィルター、内側にぼかしが入るbackground-blur.js。背景色を工夫すれば目立たなくなりますが……。demoページ
object-fitが効かない！
仕事でコーディングしてると高頻度で使うことになるobject-fit。
HTML上でimgタグを使って配置しobject-fitを当てる場合は、IEやEdgeでは実装が予期しない形となります。
下記のDEMOは、imageをそのまま配置したものと、imgタグに（不精なんでインラインで）object-fit:cover; width:200px; height:200px;を指定したものです。
DEMO
上記の例は、ChromeとIEとでそれぞれ下記のような表示になります。
Chromeではstyleで当てたobject-fit:cover; width:200px; height:200px;のとおり切り抜かれましたが、IEでは切り抜かれず、ただwidth:200px; height:200px;だけが適用されてしまいました。
CSSでbackground-imageを使って配置し直すか、あるいはofi.js(object-fit-images)を使ってIE対応をしましょう。
ofi.js(object-fit-images)を当てよう！
下記Githubからダウンロードします。
/dist/の中のofi.jsかofi.min.jsを、適切な場所に格納 → HTMLにリンクを記述してください。object-fit:cover;を当てたい画像に付けるclass名を、ここでは.ofi-coverとし、CSSの記述をします。
.ofi-cover {
object-fit: cover;
font-family: 'object-fit: cover;'; /*IE対策*/
}ofi.min.jsを読み込むリンクとは別に、</body>タグの直前に下記コードを追記します。先ほど新しく作ったclassに指定がされるようになります。object-fit:cover;を当てたい画像に.ofi-coverを付加します。
<script>
objectFitImages('img.ofi-cover');
</script>IEでもobject-fit:cover; width:200px; height:200px;が効くようになりました！object-fit:cover;だけではなく、object-fit: contain;やobject-positionもCSSに追記することで調整できます。
.ofi-cover02 {
object-fit: cover;
object-position: top;
font-family: 'object-fit: cover; object-position: top;'; /*IE対策*/
}幅広時の実装テストです。object-fit:cover; object-position:top; width:100%; height:100px;
時々忘れるのでメモ：object-fitは親要素ではなくimg自体にサイズを指定して使用する。
上記のように.ofi-cover02等、増やした場合は、</body>タグの直前に追加してくのを忘れないこと。
IEでもSVGアニメーションをしたい！
jQuery DrawSVGを試してみた別記事です。
object:scroll;で表示させたスクロールバーのデザイン調整したい！
fleXcroll.jsを当てよう！
CSSでスクロールバーの調整をしてもChromeとSafariくらいでしか反映されませんが、
fleXcrollを使うとIE、Edge、Firefoxでも反映されるし、スマホ上での表示・操作も問題なし。有能！
下記記事に詳しくまとめましたので、参照なさってください。
videoタグで埋め込んだmp4が再生されない！
mp4のエンコードの問題かもよ！
ひとくちにmp4と言ってもエンコードの種類によってはIEで再生されないようです。
H.264形式が正解なので、もし提供された動画素材のエンコードがmpeg-4などだったら、Adobe Media Encorderなどを使って保存し直しましょう（あるいは提供元に連絡して、正しいエンコードにして提供し直してもらう）。
paddingの表示がIEだけおかしい！
mainタグ編
なぜかIEだけmainをdisplay: inline;と認識してしまいます。
IEさんのためだけに
main {display: block;}と記述しましょう。
position:sticky;が使いたい
オールドスタイルで対応
position:sticky;は諦めて、JSでスクロール量に合わせてposition:fix;を付けたり外したりする。
Polyfillで対応する
その1
jsライブラリのstickyfillを使うとIEでも対応できます。下記サイト参照。
その2
jsライブラリのsticky-stateを使うとIEでも対応できます。下記サイト参照。
実装方法はその1の
stickyfillの方が簡単ですが、構築中のサイトでちゃんと動く方を選べばいいと思います。
20210924追記：上2つ参照とリンク貼っていましたがサイトごと消滅していました。。技術系サイト、ちょいちょい消えちゃうなぁ。
outline-offsetが使いたい
IEではoutlineは使えてもoutline-offsetは使えないため、諦めて:before:afterの擬似要素を使いましょう。
CSSの変数が使いたい
IEでは変数が使えないので、そもそも変数を使わないか、Polyfillを使ってIE対応しましょう。
上記サイトの使い方（Usage）のところを参考にheadタグでjsを読み込みます。
@important!importantとは相性が悪いようなので、うまく反映されないときは使用していないかチェックしてみてください。
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>selectのデフォルトの矢印を非表示したい
form周りのデザインアレンジ、正直各ブラウザのデフォルトのままの方がアクセシビリティだったりブラウザの仕様変更があっても影響が無いし、なにより各ブラウザでのチャック項目が増えるのが面倒……。しかしデザイナーとしてはそこのデザインとして魅せたいと思ってることが多く（というかディレクターがそこら辺考慮して指示出していないことが多い）、結局ブツブツ言いながら実装することに。
ベンタープリフィックスをどこまで付けるか問題はここでは置いておいて、
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}を付けてもIE11ではデフォルトの矢印が残ったまま……！ ここは「IEではできません」と突っぱねるか、
select::-ms-expand {
display: none;
}を追加してIE対応をします。
IEでも対応されてるやり方をしているはずなのにやっぱりIEだけおかしい！
CSSの記述がミスってるのかも
.selector {border: 1px #000solid;} /* 正しくは、1px #000 solid */例えば上記のように半角スペースの入れ忘れミスがあった場合、他のモダンブラウザは優しいので空気を読んで認識してくれますが、IEさんは変な記述はあっさり無視してくれます。
ベンダープレフィックスを付けたら直るかも
IE11でもう不必要と言われても、表示崩れが起きたときに-ms-を使うと直せたりします。
selectの矢印の件はこのちょっと上に書いています。
ケースにも寄るし理屈も分からないのですが、もうおまじない感覚です。
以下、一例です。
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);互換表示されてるせいかも
またはIEの設定（歯車アイコン）→「互換表示設定」→「「Microsoft 互換性リストの使用」のチェックが入っていないか確認してみてください。チェックが入っていたら外してください。
この互換表示が今だに存在してる意味がよく分からないのですが、もしこいつのせいだったらmetaタグの中に、
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">と記載すると、互換表示をさせないことができるようです。