IEとEdgeとFlexboxとでつまづいたおはなし

どうもkentです。9月中の目標を半分達成して一息ついた直後のことです

「そういえばIEで表示確認してなかったなあ。ま、一応見とくか」

あっ…

あんたねぇ!ふっざけんじゃないわよぉ! とは言えません。私の中ではレガシーブラウザですがモダンブラウザなので。シェア率も決して無視していい比率ではありません。 目標は最低限の整った表示です。

というわけで、イクゾー!(下記、IEIEといってますがEdgeもイコールだとお考えください)

・調査結果
原因:flexboxのjustify-contentの指定
詳しい原因は知りません。クソだよクソ。他の属性指定と組み合わせでバグっている気がしますが。とりあえずお前のせいだぞ!ってことで
下記が表示が崩れるナビバーのCSSです。

@media screen and (min-width: 768px) {
  .navbar { 
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  .navbar li { 
    flex: 1 1 auto;
    max-width: 200px;
    margin: 10px;
    text-align: center;
  }
}

justify-content:center;とmax-width:200px;を消せば整うのですが、個人的に他ブラウザでの表示が気に入りません。
(max-widthは直接原因ではありませんが、margin含めてウィンドウサイズが横1000px以上ぐらいから汚い感じになるのです。)

要は、IEだけ崩れるのですから、IEのときだけCSSの適用が変わるようにすればいいのです。メディアクエリでなんか分岐できんでない?と思いググったら、便利な手法がありました。

CSSでスタイルをIEのみ・Firefoxのみ・Chromeのみに適用する方法
https://techmemo.biz/css/only-firefox-chrome-hack/

先ほどの直下に、IEのときだけ一部CSSを打ち消すよう追記してあげます。

@media all and (-ms-high-contrast: none) {
  .navbar { 
    justify-content: none;
  }
  .navbar li { 
    max-width: none;
  }
}

いいやり方かと聞かれると「えっあ、う……知らないよ!」って感じですが、とりあえず解決は解決。

ただ、今後このようなことが積み重なっていくと、ソースが乱雑になって保守しにくくなるとか、修正の表示確認に時間がかかるとか、問題があります。今解決したからもう出てこないやろwなんてことは絶対ありません。

もっと勉強して、設計段階からもっともっと考えておかないといけないな、という教訓になりました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です