CSS 检测 IE 浏览器

CSS 检测 IE 浏览器

<!--[if IE]>
<link href="ie.css" rel="stylesheet">
<![endif]-->

<!--[if IE6]>
<style type="text/css">
/* styles for IE6 goes here */
</style>
<![endif]-->

<!--[if lt IE7]>
<style type="text/css">
/* styles for IE7 goes here */
</style>
<![endif]-->

<!--[if lte IE8]>
<style type="text/css">
/* styles for IE8 goes here */
</style>
<![endif]-->

<!--[if gt IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->

<!--[if gte IE9]>
<style type="text/css">

<!-–[if IE 7]>
<!–- 如果IE浏览器版是7,调用ie7.css样式表- –>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]–->
<!–-[if lte IE 6]>
<!–- 如果IE浏览器版本小于等于6,调用ie.css样式表 -–>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]–>
  注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。
    比如如下代码，在IE浏览器下执行显示为红色，而在非IE浏览器下显示为黑色。
<!-–[if IE]>
<style type="text/css">
body{
background-color: #F00;
}
</style>
<![endif]–->

/* Target IE 10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  p {
    color: red;
  }
}

device-pixel-ratio

<!-- Target Safari and Chrome -->

@media screen and (-webkit-min-device-pixel-ratio:0) {
  p {
    color: red;
  }
}

<!-- Target Firefox -->

@-moz-document url-prefix() {
  p {
    color: red;
  }
}

<!-- Target Opera -->

x:-o-prefocus, p {
  color: red;
}

var ms_ie = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');

if ((old_ie > -1) || (new_ie > -1)) {
    ms_ie = true;
}

if ( ms_ie ) {
   document.documentElement.className += " ie";
}

old IE

p {
  color: red; /* All browsers */
  color: red\9; /* IE8 and below */
  *color: red; /* IE7 and below */
  _color: red; /* IE6 */
}

refs

https://www.quirksmode.org/css/condcom.html

https://www.webhek.com/post/conditional-comments-in-ie11-10.html

https://www.4spaces.org/css-ie-browser-check/

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---