Skip to content
文章目录

判断是否为ie浏览器

css 判断方式

<!--[if !IE]><!--> 除IE外都可识别(不是IE) <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
html
<!--[if IE]> <link href="Style/IE.css" rel="stylesheet" type="text/css" /> <![endif]-->

如果你的浏览器是 IE11,页面中头部

html
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

上面的代码是告诉 IE 浏览器,IE8/9 及以后的版本都会以最高版本 IE 来渲染页面。

那么用这个判断是无效的

<!--[if IE]>
            <style type="text/css">
                body{ background: red;}
            </style>

<![endif]-->

IE 条件判断,在低版本中是有效果,在 IE10 以及 IE11 是无效的。

解决方式一:

在页面中,meta 渲染模型改为 IE9。

html
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />

在 html 网页的 head 里加入上面的元标记,这样 IE10/11 就能识别条件性注释了,我们也就可以像 IE6/7/8/9 那样编写针对性的 CSS 代码了。但这样做有个弊端,很显然,浏览器这样就会才能 IE9 的渲染模式,而不是 IE10/11 技术。

解决方式二:

CSS 的媒体查询语句(media query)是一种高级的 CSS 条件语句,它能根据一些属性和属性值计算判断 CSS 是否可以生效。在这里,我们要使用一个IE10/11独有的属性,它就是-ms-high-contrast,只有IE10/11实现了这个属性,它可以有两个值active或none,使用下面的媒体查询语句:

css
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
}

火狐浏览器、谷歌浏览器不能识别这个属性,所以不会执行这个查询语句里的 CSS,从而实现了条件性执行的效果。

js 判断方式

ts
function isIE() {
  //ie?
  if (!!window.ActiveXObject || 'ActiveXObject' in window) return true
  else return false
}

参考资料

[if IE] 在 IE10 或者是 IE11 以及以上 中无效的解决方案

判断 IE 版本的 HTML 语句详解

用 CSS 如何判断 IE 浏览器版本

JS 如何判断是否为 ie 浏览器的方法(包括 IE10、IE11 在内)

详解 "X-UA-Compatible" 和 "IE=edge"