IE11でMSブラウザートラブル再発！ IE10/11およびEdgeのCSSハック

見なければトラブルもスルーできたのだが、あるページをたまたま暇にしていたIE11で見たところ、表示が崩れていた。

このIEを含むCSSの修正は時間をかけてもクリアできなかったので、突貫で、IEの表示くずれを専用CSSの緊急避難措置で間に合わせた。

IE10以降Edge対応CSSは「_:-ms-lang(x), ～」

IE専用のCSSの書き方はいろいろあり、試したところ、下記がシンプルで使い回ししやすいようだ。

_:-ms-lang(x), セレクタ { プロパティ:値 }

@supports (-ms-accelerator:true)：Edge
@media all and (-ms-high-contrast:none)：IE11

メディアクエリ型もあるが、後述するようにレスポンシブ対応では支障が出る。

たくさんあるので、下記ページを参考にどうぞ。

レスポンシブのCSSメディアクエリの入れ子はネストに

パソコンオンリーでいい、自サイトもデスクトップ版のみ、そういうケースならよろしいが、単純な入れ子ではCSSが読み込まれない可能性があり、レスポンシブのCSSではネスト（SassやLessなどで拡張子もcssでなくなる…）という手法を使わなければならない。

レスポンシブのメディアクエリだけでもややこしいのに、入れ子に替わるネストのためにSassやLessなどに手を出す必要もあり、ネストは回避したい。

ところで、上記は自家製ブログカードで、「display:flex」を使っている。

すべてのモダンブラウザーが対応しているようだが、これも前のバージョンを使ったユーザーに対してはリスクと言える。

このフレキシブル・ボックスで、IEの不具合が発動した。

そして、今回のコーディングが悪いのか、WordPressの例の<p>やら</p>やら<br />が勝手に挿入されて、これまた七転八倒の長時間の苦闘もあった。

フレキシブル・ボックス（display:flex）については、後日投稿予定。

IE11の display:flex 崩れ暫定対応

では本題に戻って、IEのCSSハックの具体例を。

display:flexは、新しいのでバグもある。
そしてIEでは、コンテナからアイテムがはみ出すことが多い。

該当アイテムや親コンテナのCSSをいろいろ書き換えたが、すべてダメだった。

word-wrap、overflow-wrap、white-space:pre-wrapなど、折り返し系のCSSも効かない。
そもそも、幅を認識していないのだから、折り返しの位置も理解できないのだろう…

display:flex用の下記を、親コンテナや該当子アイテムに設定してもダメ。

-webkit-flex-wrap:wrap;
flex-wrap:wrap;

こうして、IEのCSSハックに手を染めることになる。

IE11/Edge CSSハック「_:-ms-lang(x), ～」

はみ出しているflexアイテムが、flexコンテナ内におさまるように、むりくりwidthを設定。

_:-ms-lang(x), アイテムのセレクタ { width:480px; } 

なんとか、はみ出しがおさまった。

Windows 7/8/10のタブレットとSurfaceのみ対応

次は、レスポンシブだ。

Windows Phoneなどは、申し訳ないが無視。
Windows 7/8/10のタブレットと、Surfaceのみの対応で済ます。

タブレットの縦は、画面の幅が「768」である。
最低限として、768pxの横幅で確認する。

Windows 7のIE11も、ウインドウの幅を狭くしていくと、レスポンシブになっていて表示が切り替わる。

そこで、上記サイトにアクセスして、IEの横幅を768にする。

そして、レスポンシブCSSは、コンテナが狭くなるので、あわせてアイテムも768のIE11を確認しながら狭く指定する。

@media screen and (max-width: 768px) {
    _:-ms-lang(x), アイテムのセレクタ { width:210px; } 
    _:-ms-lang(x), .col1wrap .myFlatDesign .blogBlogCard ul {
        -webkit-flex-direction:column;
        flex-direction:column; }
}

また、display:flexの横並びが、IEは苦手である。

他のブラウザーは、ロゴ画像を小さくして、右テキスト枠も狭くしながら縦に伸びるのだが、IEはそのまま。

そこで、本来ならスマホ縦で、display:flexは横方向から縦方向に切り替えるのだが、IEだけ前倒ししてみる。

やれやれ…

日本ではIEとEdgeのブラウザーシェアが意外に高い！

【2017年1月23日 追記】

下記ページによると、browserのシェアは、IE11が19.2％でEdgeが4.15％！

レスポンシブはやらなくても良さそうだけど、PCとSurfaceのIE11・Edgeは対応しておいたほうがよさそう。

IE11で確認する必要性が理解できたので、今回のトラブルもハッピーに転ずることができそうだ。