はてなブックマーク

Flexbox使用時にIE11、Edgeだと子要素の画像が伸縮してしまうバグの修正方法の紹介。 flex-shrink を0に設定してやると直る。 img { flex-shrink: 0; } 参考：Flexbox on IE11: image stretched for no reason?

IEのバグで背景画像に指定しているSVG画像（SBGアイコンなど）がbackground-positionの挙動に反して中心揃えになってしまうのを回避する方法。 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:n

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 M