モダンブラウザで発生する謎バグと解決策
CSSが一切効かなくなる
- 発生したブラウザ
- IE 11
- バグの原因
- main タグを時折認識しなくなる。
発生条件は不明だが、IE 11 は既にレガシーブラウザと化しているので仕方ない。
- 解決策
- main ではなく div / article など他のボックス要素を使う。
Flexbox/column を指定すると float みたいに浮く
この正常表示が、
こんな感じで崩れる。
- 発生したブラウザ
- IE 11
- バグの原因
- flex: n; を指定しているとこうなる。
IE 11 は既にポンコツ。1234<ul><li><img src="images/ph_001.jpg" alt=""></li><li>ダミーテキスト</li></ul>12345678910111213ul {display: flex;flex-direction: column;}li {&:last-child {color: white;flex: 1;padding: 20px;background: #666;}}
- 解決策
- flex-direction: column; で縦にするときは、flex: none; を指定、もしくは削除。
Flexbox/space-between で端に行かない
この正常表示が、
こんな感じで崩れる。
- 発生したブラウザ
- 主要ブラウザ全て
- バグの原因
- 親要素に指定した before / after が Flexbox のレイアウト対象に含まれるため。1234<ul><li><img src="images/ph_001.jpg" alt=""></li><li>ダミーテキスト</li></ul>12345678910111213141516ul {display: flex;justify-content: space-between;&:before {content: '';}}li {&:last-child {color: white;padding: 20px;background: #666;}}
- 解決策
- 親要素の before / after を削除、もしくは float などで代替。
コメントを投稿する