SurfaceやWindows Phoneなど、情報はゼロに近いが、Windows 7のIE11でふと見たところ、表示が崩れて心も折れた。
スマホサイトWeb WordPressなどのSEO
小画面 少コンテンツ 省テキスト 多画像対応の
コーディング実験検証
見なければトラブルもスルーできたのだが、あるページをたまたま暇にしていたIE11で見たところ、表示が崩れていた。
このIEを含むCSSの修正は時間をかけてもクリアできなかったので、突貫で、IEの表示くずれを専用CSSの緊急避難措置で間に合わせた。
IE専用のCSSの書き方はいろいろあり、試したところ、下記がシンプルで使い回ししやすいようだ。
_:-ms-lang(x), セレクタ { プロパティ:値 }
@supports (-ms-accelerator:true):Edge
@media all and (-ms-high-contrast:none):IE11
メディアクエリ型もあるが、後述するようにレスポンシブ対応では支障が出る。
たくさんあるので、下記ページを参考にどうぞ。
パソコンオンリーでいい、自サイトもデスクトップ版のみ、そういうケースならよろしいが、単純な入れ子ではCSSが読み込まれない可能性があり、レスポンシブのCSSではネスト(SassやLessなどで拡張子もcssでなくなる…)という手法を使わなければならない。
レスポンシブのメディアクエリだけでもややこしいのに、入れ子に替わるネストのためにSassやLessなどに手を出す必要もあり、ネストは回避したい。
ところで、上記は自家製ブログカードで、「display:flex」を使っている。
すべてのモダンブラウザーが対応しているようだが、これも前のバージョンを使ったユーザーに対してはリスクと言える。
このフレキシブル・ボックスで、IEの不具合が発動した。
そして、今回のコーディングが悪いのか、WordPressの例の<p>やら</p>やら<br />が勝手に挿入されて、これまた七転八倒の長時間の苦闘もあった。
フレキシブル・ボックス(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ハックに手を染めることになる。
はみ出しているflexアイテムが、flexコンテナ内におさまるように、むりくりwidthを設定。
_:-ms-lang(x), アイテムのセレクタ { width:480px; }
なんとか、はみ出しがおさまった。
次は、レスポンシブだ。
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だけ前倒ししてみる。
やれやれ…
【2017年1月23日 追記】
下記ページによると、browserのシェアは、IE11が19.2%でEdgeが4.15%!
レスポンシブはやらなくても良さそうだけど、PCとSurfaceのIE11・Edgeは対応しておいたほうがよさそう。
IE11で確認する必要性が理解できたので、今回のトラブルもハッピーに転ずることができそうだ。