7のIE11でふと見たところ、表示が崩れて心も折れた。7のIE11でふと見たところ、表示が崩れて心も折れた。IE10/11およびEdgeのCSSハック見なければトラブルもスルーできたのだが、あるページをたまたま暇にしていたIE11で見たところ、表示が崩れていた。このIEを含むCSSの修正は時間をかけてもクリアできなかったので、突貫で、IEの表示くずれを専用CSSの緊急避難措置で間に合わせた。~」IE専用のCSSの書き方はいろいろあり、試したところ、下記がシンプルで使い回ししやすいようだ。(-ms-high-contrast:none):IE11メディアクエリ型もあるが、後述するようにレスポンシブ対応では支障が出る。あるので、下記ページを参考にどうぞ。BrowserレスポンシブのCSSメディアクエリの入れ子はネストにパソコンオンリーでいい、自サイトもデスクトップ版のみ、そういうケースならよろしいが、単純な入れ子ではCSSが読み込まれない可能性があり、レスポンシブのCSSではネスト(SassやLessなどで拡張子もcssでなくなる...)という手法を使わなければならない。CSSメディアクエリ(@media)ブレイクポイントまとめレスポンシブもCSS次第ではあるが、パソコン、タブレット横縦、スマホ大横縦、スマホ横縦と、表示確認とCSS記述で試練の時代。≫レスポンシブのメディアクエリだけでもややこしいのに、入れ子に替わるネストのためにSassやLessなどに手を出す必要もあり、ネストは回避したい。ところで、上記は自家製ブログカードで、「display:flex」を使っている。etcすべてのモダンブラウザーが対応しているようだが、これも前のバージョンを使ったユーザーに対してはリスクと言える。このフレキシブル・ボックスで、IEの不具合が発動した。/>が勝手に挿入されて、これまた七転八倒の長時間の苦闘もあった。フレキシブル・ボックス(display:flex)については、後日投稿予定。崩れ暫定対応では本題に戻って、IEのCSSハックの具体例を。display:flexは、新しいのでバグもある。IEでは、コンテナからアイテムがはみ出すことが多い。該当アイテムや親コンテナのCSSをいろいろ書き換えたが、すべてダメだった。word-wrap、overflow-wrap、white-space:pre-wrapなど、折り返し系のCSSも効かない。そもそも、幅を認識していないのだから、折り返しの位置も理解できないのだろう...display:flex用の下記を、親コンテナや該当子アイテムに設定してもダメ。Qiitaこうして、IEのCSSハックに手を染めることになる。~」はみ出しているflexアイテムが、flexコンテナ内におさまるように、むりくりwidthを設定。}なんとか、はみ出しがおさまった。次は、レスポンシブだ。Phoneなどは、申し訳ないが無視。7/8/10のタブレットと、Surfaceのみの対応で済ます。タブレットの縦は、画面の幅が「768」である。最低限として、768pxの横幅で確認する。7のIE11も、ウインドウの幅を狭くしていくと、レスポンシブになっていて表示が切り替わる。resizeMyBrowserそこで、上記サイトにアクセスして、IEの横幅を768にする。レスポンシブCSSは、コンテナが狭くなるので、あわせてアイテムも768のIE11を確認しながら狭く指定する。}}また、display:flexの横並びが、IEは苦手である。他のブラウザーは、ロゴ画像を小さくして、右テキスト枠も狭くしながら縦に伸びるのだが、IEはそのまま。そこで、本来ならスマホ縦で、display:flexは横方向から縦方向に切り替えるのだが、IEだけ前倒ししてみる。ソフトウェアテスト・第三者検証ならウェブレッジレスポンシブはやらなくても良さそうだけど、PCとSurfaceのIE11・Edgeは対応しておいたほうがよさそう。IE11で確認する必要性が理解できたので、今回のトラブルもハッピーに転ずることができそうだ。(返信をキャンセル)コメントをキャンセルメールアドレスが公開されることはありません。問い合わせサイトマップ。