IE10、IE11ではコンディショナルコメントが使えないようです。
コンディショナルコメントとは?
IE10からコンディショナルコメントを廃止 MicrosoftはIEの次期バージョンとなるIE10において「コンディショナルコメント」のサポートを廃止することを決定している。 コンディショナルコメントは「<!-[if lt IE 6.0]> IE6に適用したいスタイルシート <![ endif]->」のように記述することで、特定のバージョンのIEに限定して処理を適用させる機能。2011/07/22
IE10からコンディショナルコメントを廃止 | マイナビニュース
コンディショナルコメントの例
<!--[if IE]>
<link rel="stylesheet" href="css/style.css">
<![endif]-->
⇩ コンディショナルコメントについては下記サイトが詳しいです。
コンディショナルコメント(各IEのバージョンにCSSを適応) | NO:334 | Webデザインリリック
例
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.figure-inner { float: none }
figure h2 a:hover { border: none}
figure h2 a:hover { padding: 8px 0 } /* IE10 */
*::-ms-backdrop,
.figure-inner { float: none }
figure h2 a:hover { border: none }
figure h2 a:hover { padding: 8px 0 } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>
以下のように書くとIE11だけで適用されるスタイルシートが書けます。(IE12が出たら適用される可能性もあります)
@media all and (-ms-high-contrast:none)
{
*::-ms-backdrop,
.figure-inner { float: none }
figure h2 a:hover { border: none }
figure h2 a:hover { padding: 8px 0 } /* IE11 */
}
「*::-ms-backdrop, 」を付けないで書くとIE10以降に適用されます。
@media all and (-ms-high-contrast:none)
{
.figure-inner { float: none }
figure h2 a:hover { border: none}
figure h2 a:hover { padding: 8px 0 } /* IE10 */
}
⇩ 下記サイト参考
css selectors - How to write a CSS hack for IE 11? - Stack Overflow
今回はこのへんで。