使用HTML注释判断IE版本

很老的技术,但实在是解决低版本IE兼容性的大杀器!

  • 该技术使用HTML注释实现,符合标准,向上兼容性强(对,那个叫CSS Hack的我就是在说你!)
  • 只有低版本IE浏览器能够理解这些注释,其他浏览器看不懂也不屑于看- -!
  • 通常用于引入针对不同版本IE的多版CSS
  • 随着IE的觉醒,较新版本的IE(IE10及以上)已经不再支持此技术


一、HTML注释判断IE的写法

<!--[if !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]-->



二、相关运算符

运算符 示例 含义
! [if !IE] 非运算符,非IE浏览器时示例表达式值为true
lt [if lt IE 5.5] 小于运算符,IE版本低于IE 5.5时示例表达式值为true
lte [if lte IE 6] 小于等于运算符,IE版本为IE 6或低于IE 6时示例表达式值为true
gt [if gt IE 5] 大于运算符,IE版本高于IE 5时示例表达式值为true
gte [if gte IE 7] 大于等于运算符,IE版本为IE 7或高于IE 7时示例表达式值为true
( ) [if !(IE 7)] 子表达式运算符,不解释
& [if (gt IE 5)&(lt IE 7)] 与运算符,IE版本高于IE 5且低于IE 7时示例表达式值为true
| [if (IE 6)|(IE 7)] 或运算符,IE版本为IE 6或IE 7时示例表达式值为true

注:lt(less than); lte(less than or equal to); gt(greater than); gte(greater than or equal to).


三、使用示例

<link rel="stylesheet" type="text/css" href="style.css">    //引入默认CSS,所有浏览器可见
<!--[if IE 9]> //如果IE版本为IE 9,引入适当的CSS <link rel="stylesheet" type="text/css" href="style_ie9.css"> <![endif]-->
<!--[if (IE 7)|(IE 8)]> //如果IE版本为IE 7或IE 8,引入适当的CSS <link rel="stylesheet" type="text/css" href="style_ie7_ie8.css"> <![endif]-->
<!--[if (lte IE 6)]> //如果IE版本为IE 6或低于IE 6,引入适当的CSS <link rel="stylesheet" type="text/css" href="style_ie6.css"> <![endif]-->

一般思路为,style.css定义现代主流浏览器样式,各个兼容性CSS重写不兼容的部分来覆盖style.css中的样式。

你可能感兴趣的:(使用HTML注释判断IE版本)