专门针对 IE 的条件性注释 (Conditional comments) 是个很奇葩的东西, 它是专门给 IE 浏览器准备的, 因为其它浏览器根本不能识别这种标记. 之所以需要这种东西, 是因为 IE 实现的网页渲染效果和其它浏览器又很多出入, 使用条件性注释可以区别对待的针对浏览器编写 CSS 等代码.
- <!--[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">
- /* 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 后, 开始不支持这种条件性注释(MSDN 上的说明).
说来也合情合理, 从 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 = Windows.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/post/conditional-comments-in-ie11-10.html