IEのみに適用したいのに、反映されない

Question

質問

サイトに、Twitter埋め込んだ時、IEでは表示されなくて画面が崩れてしまうので、
IEのみ、Twitterの部分を非表示にしたく、
下記のコード書いたのですが、反映されません。

<meta http-equiv="X-UA-Compatible" content="IE=edge">. //こちらも記載しています


<div class="ie">
　　(Twitter埋め込みコード)
</div>

@media all and (-ms-high-contrast: none) {
    .ie {
      display: none !important;
    }
}

こちらも試しました。↓

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.ie {
	  display: none !important;
	}
}

cssの書き方が間違っているのでしょうか。
ご教授お願い致します。

確認環境:
macのGoogle Chromeで 「network conditions」の設定で IE11 のサイトをみれるようにしており、
Twitter埋め込み部分の表示が崩れているのを確認しています。

Answer 1

原則６月には全世界で使用不可能になるIEへの対応を続ける必要はないと思います

Answer 2

macのGoogle Chromeで 「network conditions」の設定で IE11 のサイトをみれるようにしており、
Twitter埋め込み部分の表示が崩れているのを確認しています。

恐らくGoogle Chromeを使って、[network conditions]の[User agent]を[Internet Explorer 11]に設定されているのだと思います。
しかしここを変更しても、このCSSではChromeが[Internet Explorer 11]であると判定しません。

その理由としては[-ms-high-contrast]がMicrosoft独自の仕様であり、これを利用して[Internet Explorer]の判定を行なっているためです。
https://developer.mozilla.org/ja/docs/Web/CSS/@media/-ms-high-contrast

もし確認したいのであれば、実際に[Internet Explorer 11]で表示してください。

Comments

[nako01]

そうだったんですね。。
ご教授ありがとうございました。

Windows買うかどうか検討してみます。。

[maisumakun]

マイクロソフトが検証用の仮想マシンを公開しています。

https://developer.microsoft.com/ja-jp/microsoft-edge/tools/vms/

[nako01]

M１に変えちゃったので、VirtualBox 使えないんですよ。。
ありがとうございます！