专门针对 IE 的条件性注释 (Conditional comments) 是个很奇葩的东西,它是专门给 IE 浏览器准备的,因为其它浏览器根本不能识别这种标记.之所以需要这种东西,是因为 IE 实现的网页渲染效果和其它浏览器又很多出入,使用条件性注释可以区别对待的针对浏览器编写 CSS 等代码.
<!--[if IE]>
<link 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">
/* styles for IE9 goes here */
</style>
<![endif]-->
<!--[if !IE]> -->
<style type="text/css">
/* styles goes here but should not appear in IE5-9 */
</style>
<!-- <![endif]-->
但当 IE 的版本到到达 10/11 后,开始不支持这种条件性注释 ().
说来也合情合理,从 IE9 开始,IE 开始被 web 开发人员接受,很多人将 IE9 后的浏览器和火狐,谷歌浏览器统称为现代浏览器,因为它们开始实现新的 html5 和 CSS3 统一标准.但愿望是美好的,现实却是残酷的,很多 WEB 开发人员在开发实践中发现,同一个 CSS 在 IE9/10/11 上显示的效果和其它浏览器渲染的效果还是不一样.也就是说,我们还是需要条件性注释.
那么,在不支持条件性注释的 IE10/11 上,如何实现条件性注释的效果呢?
方法一:使用 IE=EmulateIE9 属性指示浏览器采用 IE9 渲染技术
IE9 是支持条件性注释的.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
在 html 网页的
head
里加入上面的元标记,这样 IE10/11 就能识别条件性注释了,我们也就可以像 IE6/7/8 那样编写针对性的 CSS 代码了.但这样做有个弊端,很显然,浏览器这样就会才能 IE9 的渲染模式,而不是最新的 IE10/11 技术.
方法二:使用媒体查询语句 +
-ms-high-contrast
属性
CSS 的媒体查询语句 (media query) 是一种高级的 CSS 条件语句,它能根据一些属性和属性值计算判断 CSS 是否可以生效.在这里,我们要使用一个 IE10/11 独有的属性,它就是
-ms-high-contrast
,只有 IE10/11 实现了这个属性,它可以有两个值
active
或
none
,使用下面的媒体查询语句:
@media all and( - ms - high - contrast: none),
( - ms - high - contrast: active) {
/* IE10+ CSS styles go here */
}
火狐浏览器,谷歌浏览器不能识别这个属性,所以不会执行这个查询语句里的 CSS,从而实现了条件性执行的效果.
方法三:使用 Javascript 判断浏览器的类型
先用 JavaSCript 判断是否是 IE 浏览器,如果是,就在页面的
<html>
标记上添加一个 "ie" 的类名:
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";
}
有了这个标志性 css class 后,我们就可以在 CSS 里区别性的编写 css 代码了.
.testClass {
/*这里写通用的css*/
}.ie.testClass {
/*这里写专门针对IE的css*/
}
这三种方法都能实现在 IE10/11 里条件性注释的替代效果,各有各的使用场景,我们根据软件的运行环境来选择使用哪一种.
欢迎提出意见.
来源: http://www.webhek.com/conditional-comments-in-ie11-10