モダンブラウザで発生する謎バグと解決策(2016年5月)

j2wW3weFHhk4DVXa

目次

 

CSSが一切効かなくなる

発生したブラウザ
IE 11
バグの原因
main タグを、時折認識しなくなる。
発生条件は不明だが、IE 11 は既にレガシーブラウザと化しているので仕方ない。
解決策
main ではなく div / article など他のボックス要素を使う。

 

Flexbox / column を指定すると float みたいに浮く

001

この正常表示が、

002

003

こんな感じで崩れる。

発生したブラウザ
IE 11
バグの原因
flex: n; を指定しているとこうなる。
IE 11 は既にポンコツ。

解決策
flex-direction: column; で縦にするときは、flex: none; を指定、もしくは削除。

 

Flexbox / space-between で端に行かない

004

この正常表示が、

005

006

こんな感じで崩れる。

発生したブラウザ
主要ブラウザ全て
バグの原因
親要素に指定した before / after が、Flexbox のレイアウト対象に含まれるため。

解決策
親要素の before / after を削除、もしくは float などで代替。

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。