返せ、工数!コーダー泣かせの☓☓☓☓――IE11対応まとめ

Pocket
LINEで送る

はやく消え去ってほしいとWEB業界の誰からも思われているIEさん。日本ではまだまだ居座りそうなので、対応策の備忘録リストです。

まずはIEユーザーの方へ

万が一、IEユーザーがこのページにアクセスされたときのために。
Googleが開発した世界で一番使用率が高いChromeをオススメします。軽いし、表示崩れなんて起きませんよ? 下記サイトからタダでダウンロードできます。Microsoftも「もうIE使わないで〜」言ってますし、この機会にブラウザの乗り換えなんてどうでしょうか? お願いします。

游ゴシック・游明朝の下に謎の余白ができる!

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ハック

例えばbodyfont-familyを指定している場合、

_:-ms-fullscreen, :root body {
  font-family: Meiryo, sans-serif;
}

IE11のみpaddingの調整をする

paddingの設定で対応する場合、全体を調整かけてのは大変なので、見出し、ボタン、タグなど囲みがあってズレが目立つ部分を重点的に対応でいいと思います(とディレクターを説得する)。
.selectorの部分にズレを調整した見出しやbuttonのclassなどを記述して、paddingを調整します。実際にIEで検証しながらの作業になるんですが、2px〜3pxほど下にズレして配置されるようにすると丁度いいと思います。

Googleの日本語FONTがIEでは反映されない!

他のモダンブラウザではきれいなFONTになって表示されるのに、IEではアンチエイリアスの効いてないガビガビの文字に……。「GoogleさんがIEなんて相手にするわけないですもんね〜〜」で済ませたいところですが、さすがのGoogleさん、対応策を用意しております。
今は「早期アクセス」という名前は取っていますが、Google 日本語FONTと言うとこのサイトに行きがち(ここではさわらび明朝で話を進めます)。

そうではなく本家のGoogle Fontsに行って検索で探します。

headタグに記述するこのscriptをそのままコピーしたいところですが、

CUSTOMIZEタブをクリックしウインドウを切り替えます。

LanguagesJapaneseをチェックします。

EMBEDタブから元のウインドウに戻ると、赤枠の部分が記述が変わっています。

これをコピーしてheadタグに貼り付けます。

こちらの記事で作ったデモページのBefore Afterが以下の通りです。

Before

普通に設定すると、IEではこの通りガビガビです。

After

上記のやり方でIE対応すると、(気持ちガビガビしていますが)指定したFONTが反映されています。Noto Serif JPも同じやり方でIE対応できます。

Flexboxが効かない!

中央揃え編

justify-contentalign-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で見た場合は以下のキャプチャのようになってしまいます。

ieでの表示のキャプチャ
ieでの表示のキャプチャ
他ブラウザでの表示のキャプチャ
他ブラウザでの表示のキャプチャ

ここで悪さしているのは子要素のmarginです。つい癖でナチュラルにmargin付け加えてしまいますが、justify-contentとは相性が悪いようです。
これを削除したのが以下のDemoになります(Bootstrapなので、子要素のclassからmx-autoを削除しています)。

Demo
上下左右中央に

IEでも上下左右中央に配置されました。

下揃え編

複数カラム時に下に揃えたい。モダンブラウザなら特に悩むことなく実装できます。が、そこはIE。IEでだけ、長いセルに高さを合わせて画像が縦に伸びたりする場合。
下付きにさせたい要素をdivで包んで、そのdivにmin-height: 0%;を当ててあげると画像が縦に伸びず下に付きます。

FlexboxのIE表示崩れあるあるなんですが、崩れた状態を再現できませんでした🙁

横並び編

複数カラムをさっと横並びに配置したい。Flexboxの基本的な使い方ですね。
このカラムの横幅をflex-basisで指定するとIEでだけカラム落ちすることがあります。
この場合、同じ数値をmax-widthでも指定してあげるとカラム落ちしなくなります。普段からflex-basismax-widthをセットで記述する癖を付けるといいですね。

WordPressのビジュアルエディター投稿でカラムを作るとこの現象が起きます。しかも切り替えポイントが幅600pxというユニークさ。。コーダーが構築で使用するときは気を付けてチェックした方が良さげです。

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%
}

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
そのまま配置
object-fit:cover;でトリミング

上記の例は、ChromeとIEとでそれぞれ下記のような表示になります。

ieでの表示のキャプチャ
ieでの表示のキャプチャ
Chromeでの表示のキャプチャ
Chromeでの表示のキャプチャ

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.jsofi.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>
そのまま配置
img.ofi-cover

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対策*/
}
幅指定を100%にしてみつつ、object-positionのテスト

幅広時の実装テストです。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だけmaindisplay: inline;と認識してしまいます。
IEさんのためだけに

main {display: block;}

と記述しましょう。

position:sticky;が使いたい

オールドスタイルで対応

position:sticky;は諦めて、JSでスクロール量に合わせてposition:fix;を付けたり外したりする。

Polyfillで対応する

その1

jsライブラリのstickyfillを使うとIEでも対応できます。下記サイト参照。

その2

jsライブラリのsticky-stateを使うとIEでも対応できます。下記サイト参照。


実装方法はその1のstickyfillの方が簡単ですが、構築中のサイトでちゃんと動く方を選べばいいと思います。

outline-offsetが使いたい

IEではoutlineは使えてもoutline-offsetは使えないため、諦めて:before:afterの擬似要素を使いましょう。

IEでも対応されてるやり方をしているはずなのにやっぱりIEだけおかしい!

CSSの記述がミスってるのかも

.selector {border: 1px #000solid;} /* 正しくは、1px #000 solid */

例えば上記のように半角スペースの入れ忘れミスがあった場合、他のモダンブラウザは優しいので空気を読んで認識してくれますが、IEさんは変な記述はあっさり無視してくれます。

ベンダープレフィックスを付けたら直るかも

IE11でもう不必要と言われても、表示崩れが起きたときに-ms-を使うと直せたりします。
ケースにも寄るし理屈も分からないのですが、もうおまじない感覚です。
以下、一例です。

-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);

互換表示されてるせいかも

またはIEの設定(歯車アイコン)→「互換表示設定」→「「Microsoft 互換性リストの使用」のチェックが入っていないか確認してみてください。チェックが入っていたら外してください。
この互換表示が今だに存在してる意味がよく分からないのですが、もしこいつのせいだったらmetaタグの中に、

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

と記載すると、互換表示をさせないことができるようです。

強制リロードのやり方は?!

Ctrl+F5!

Pocket
LINEで送る

back to top