IE10以下、IE11、edgeの各バージョンを個別にCSSハックした時の備忘録 | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

久しぶりに１ページ簡単なランディングページをコーディングしたのですが、案の定というかやっぱりというか、あいかわらず『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