# CSSのクロスブラウザとぶっ壊れた現象例

自分の書いたCSSがsafariやIEで開くとぶっ壊れる現象を多数目撃したのでまとめた．ちなみに自分のデフォルト検証ブラウザはChrome．

pointer-events:none はIEでは使えない

[CSS]CSSの pointer-events で <a> タグのリンクを無効化する方法 | WEBデザインのTIPSまとめサイト「ウェブアンテナ」

えーそんな．仕方ないので他の方法でlink自体を表示しないようにした．

flexboxに配置した画像がsafariではクソデカになる

align-items: flex-start; をついきすれば解決する．

higashidadan.com

flexboxは最近でた大変便利なモノだが，主にIEやSafariなどでバグが起きる．対応しきっていないんだろうな．

display: flex;のバグ対応 | takblog

takblog.site

IEで displa:gridの中身が突き破ってくる

これも対応していないかららしい．ちなみこのような古いブラウザでも正しく表示させるにはベンダープレフィックスというものをつけるといいらしい． デザイン・CSSつよつよ同期に教えていただいた．

ベンダープレフィックスとは、CSSの新しいプロパティに付けて、記述したプロパティが拡張機能であることを、各ブラウザに示すために使われる識別子です。草案段階の仕様を先行実装する場合にも使用されます。勧告されたばかりのプロパティにベンダープレフィックスをつけることで、ブラウザはそれらの新しいプロパティに対応することができます。

www.itra.co.jp

たとえば display:flex を使う時はこんな風に書くといいらし．

.f-container {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}

なお，プレフィックスを付けていないものも併記する必要があるとのこと．（フォントファミリーの指定と似たようなのものかな？）

各ブラウザごとのプレフィックスはこんな感じ．

E 10
ベンダープレフィックス(-ms-)が必要
Safari 6.1-8
ベンダープレフィックス(-webkit-)が必要
Android 2.1-4.3
ベンダープレフィックス(-webkit-)が必要
iOS Safari 7-8.4
ベンダープレフィックス(-webkit-)が必要
【2020年最新】Flexboxの対応ブラウザとベンダープレフィックスまとめ | Web Design Trends webdesign-trends.net

CSSのクロスブラウザ対応状況について

coliss.com

こちらはCSSつよつよ同期の先輩から教えていただいいた． 読み物として面白い． これを読むとflexbox登場は2013年ごろ，16年ごろに全てのブラウザでサポートされ，gridはさらに遅く2017年登場であることがわかる．

早くIE滅びて…