判断是否为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 以及以上 中无效的解决方案