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

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

HTML5 Parsing in IE10

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

Edgeの場合はこちら

以下の記事を参考:

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 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指定がよさげ。