Microsoft Edge で画像がつぶれる – CSSハック
〜再検証したところ、ランダムに事象が発生したので最下に追記いたしました〜
新たなブラウザもできて少しはまともなOSになったのかと思いきや、あいも変わらず悩まされるMicrosoftのブラウザ問題。
いや、相変わらず偶数バージョンのコケっぷりがハンパないです。
ユーザーにも開発側にも不親切なわかりにくい仕様。
なんでこんなにも嫌がらせ的にものが作れるのか不思議です。
使うひとがいなければこんなブラウザにいつまでも付き合うつもりもないのだけれど、そこそこつかうひとがいるので問題解決するしかありません。
まずは、edgeのみにきかせるCSS（スタイルシート）です。
@supports (-ms-ime-align:auto) {
.anyselector {
/* プロパティ：値 */
}
}
そしてそんなアホな！っていう、画像が『グシャッ』と潰れる問題の対策。
これ、要するに「img」タグのプロパティ“height”に対して“auto”値を入れてると起こります。
なぜこんな仕様にする必要があるのか、凡人の僕には理解できませんけどとにかくそういう高度なありえない仕様です。
やっぱ天才は違うわww
ボヤキはこの辺できりあげつつ、仕方ないので以下のような按配でハックかけました。
本当は可読性下がるのでハックしたくないんですが、既に作ったものに対してすべてやり直しはきびしすぎるのでやるしかない。
「動いているものは下手にいじくるな」はSE時代の先輩の遺言。あ、今もお元気ですけど当時は逝きながら仕事してたのでww
@supports (-ms-ime-align:auto) {
.selector img {
height:100%;
}
}
画像に対してかかってる「height:auto;」を「height:100%」に修正してあげます。
これからはcssファイルの上位で安易に「img { height:auto; }」なんてやらないようにしないとね。
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
WordPressデザインブック HTML5&CSS3準拠 (WordPress DESIGN BOOK)
＜後日談＞
上記の方法で安心していたのもつかの間、なぜかランダムに発生する画像のつぶれ問題。
要するにmicrosoft Edgeは“width”と“height”を“100%”にしただけではダメで、サイズ指定してやらなければならない本当にダメなクソブラウザと言うことが判明しました。
なので特にレスポンシブの場合やもちろんそれ以外でも画像サイズを必ず指定して、上記のcssハックの中で「overflow:hidden;」なんかを設定してやるのがいいかと思います。
なんでこんな汎用性のない仕様にしてるのかまったく理解できないので、頭の悪い僕にどうかmicrosoftのナカノヒト！教えてください！もちろんそれ以外の方もお願いします。
https://www.facebook.com/tachibanacraftworks/
または、
twitterは、@twitt_rider
スタイルはCSSで決めるものなんていう古くさい話はどうでもいいので、核心だけお願いします。
