本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。
この記事は最終更新から2年以上経過しています。
久しぶりに１ページ簡単なランディングページをコーディングしたのですが、案の定というかやっぱりというか、あいかわらず『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