久しぶりに1ページ簡単なランディングページをコーディングしたのですが、案の定というかやっぱりというか、あいかわらず『IEだけ』表示が崩れるんですよ・・・。まさかMSがドヤ顔でリリースした『edge』も同様に崩れるとは思わなかったけど・・・。
バッドノウハウとはわかっていてもハックするしかないわけで、まぁいつまでたってもダメな子だから仕方ないね。もういい加減クソブラウザリリースするのやめてくれないかな・・・。
/*ie10以下*/
.foo {
display: inline-block\9;
padding-bottom: 0\9;
height: 60px\9;
}
/*ie11*/
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, .foo {
display: inline-block;
height: 60px;
}
}
/*edge*/
@supports (-ms-accelerator:true) {
.foo {
display: inline-block;
padding: 0;
height: 60px;
}
}
とりあえずIE8以降で表示が崩れないようにハックしました。
CSS Hacks for Windows 10 and Microsoft's Edge (Formerly Spartan) Web Browser