IE11で利かないCSS

自分が把握しているもので以下になります。
（他もありましたらご報告お願いします）

• × vmax（vminはいけるのに。。。)

• × background-blend-mode
  （background-imageが表示されません。
  　Edgeは、background-imageは表示されますが、
  　効いていないです）

• × object-fit（写真の比率が変になります）

• △ transition
  （一律には言えませんが、スライドなどに仕込んだ時うまくいかない場合があります。）

IE11だけにCSSを適応させる方法

1.適応するCSSを重ねて書く。

padding: 1% 0 6%; //vmaxが効かないIE用
padding: 1px 0 6vmax; //vmaxが効く他のブラウザ用

2.適応できるCSSとHTMLで偽装する

写真を加工する方が一番手っ取り早いですが、どうしても！という場合の方法。

• 写真の上に、position:absolute;で上から乗せる。
  乗算の場合は、透明度を高くした黒背景を。
  スクリーンの場合は、透明度を高くした白背景を。

• 写真の下に、background-colorで色指定。
  写真の透明度を上げて、乗算・スクリーンっぽく見せる。

3.javaScriptライブラリを使用

object-fit対策は、javaScriptライブラリの使用が有効です。
「fitie」を使う方法もありますが、
自分はうまくいかなかったので、
「object-fit-images」を使用しました。
使い方はこちらのサイト様に詳しく載っています。
https://www.webcreatorbox.com/tech/object-fit

4.CSSハックを使う

こちらのサイト様をご参考にしていますm(_ _)m
https://chaika.hatenablog.com/entry/2018/04/06/120000

@media all and (-ms-high-contrast:none) {/*IE対策*/
  transition:none;
}