IE11, Microsoft EdgeのみにCSSを適応させる時のメディアクエリ

IE10から従来のHTML上にif文でIEのみ対象にしたCSSを読み込ませることができなくなった模様。(正確にはHTML5を使用している時にだが)

HTML5 Parsing in IE10

よって今後はどうすればいいかというと、メディアクエリを使用する。以下IE10,IE11それぞれに適応させる時のメディアクエリ。

/* for IE 11 */
  @media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, .selector {
      some-syntax: some-property;
    } 
  }

/* for IE 10 */
  @media all and (-ms-high-contrast:none){
    .selector {
      some-syntax: some-property; 
    }
  }

Edgeの場合はこちら

/* for Microsoft Edge */
@supports (-ms-ime-align:auto) {
  .class-name {
    some-syntax: some-property;
  }
}

以下の記事を参考:

Targeting IE10 & IE11 Browsers with CSS

CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser

IE11で背景画像に使用しているSVG画像が中心揃えになってしまうのを防ぐ

IEのバグで背景画像に指定しているSVG画像(SBGアイコンなど)がbackground-positionの挙動に反して中心揃えになってしまうのを回避する方法。

svg画像内の<svg>タグ内に、以下のコードを追記。

preserveAspectRatio=”xMinYMid”

例:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

     viewBox="0 0 20.8 41.6" style="enable-background:new 0 0 20.8 41.6;" xml:space="preserve" preserveAspectRatio="xMinYMid">

というような感じになる。

詳しくは下記を参照。

svg background image position is always centered in internet explorer, despite background-position: left center

Best Practices for Getting Started with SVG

IE11 min-widgh:initial; が反映されないバグ

IE11でmin-width:initial;が反映されない。initalはもともと0が設定されているため、0を直接指定すればOK。IE、edgeを見越したコーディングをするのであれば、min-widthの初期化には0指定がよさげ。

.sample {
 min-width: 0;
}