::-ms-backdrop, .sample {
display: inline-block;
height: 60px;
}
}
/* Edge */
@supports (-ms-accelerator:true) {
.sample {
display: inline-block;
padding: 0;
height: 60px;
}
}
2.条件付きコメント
IEのみに独自実装されている条件付きコメントを利用した手法です。
ただし、IE10からは条件付きコメントが廃止となったため、有効なのはそれ以前のバージョンになります。
/* IE9のみ */
<!-- [if IE 9.0]>******<![endif]-->/* IE8のみ */
<!-- [if IE 8.0]>******<![endif]-->/* IE7のみ */
<!-- [if IE 7.0]>******<![endif]-->/* IE6のみ */
<!-- [if IE 6.0]>******<![endif]-->/* IE9以下 */
<!-- [if lte IE 9.0]>******<![endif]-->/* IE8以下 */
<!-- [if lte IE 8.0]>******<![endif]-->
3.jQueryによるIEバージョン判別
jQueryでUserAgentを取得して、その文字列を見てどのブラウザか判別する方法です。IEのバージョンごとに異なるclassをhtml要素に付与します。
var ua = navigator.userAgent;
var isIE = ua.match(/msie/i),
isIE6 = ua.match(/msie [6.]/i),
isIE7 = ua.match(/msie [7.]/i),
isIE8 = ua.match(/msie [8.]/i),
isIE9 = ua.match(/msie [9.]/i),
isIE10 = ua.match(/msie [10.]/i);
isIE11 = ua.match(/msie [11.]/i);
if (isIE) {
$("html").addClass('ie');
if (isIE6) {
$("html").addClass('ie6');
} else if (isIE7) {
$("html").addClass('ie7');
} else if (isIE8) {
$("html").addClass('ie8');
} else if (isIE9) {
$("html").addClass('ie9');
} else if (isIE10) {
$("html").addClass('ie10');
} else if (isIE10) {
$("html").addClass('ie11');
}
}
IEの12とか13とか、はたまたEageが進化するとどうなるのか・・・
考えただけでおぞましいのですが、今回はこの辺で。
#下記は、2010年1月16日の記事です。
なぜ、IEだけハッキングが必要なのか・・・いつも考えます。
レンタリングの方法が違うのはいいが、やはり特色のためだけにコレやられるときついです。
うーん、、
たしか、IEユーザーは、年齢に比例するそうですね。
とりあえず、簡単なハッキングの方法を。
IE6用（_を読み込む）
#main {color: #fff;}
_main {color:#ccc;}
IE7用（*を読み込む）（IE6も読み込む）
#main {color: #fff;}
