今天小编跟大家讲解下有关条件注释样式的编写方法及示例代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关条件注释样式的编写方法及示例代码 的相关资料，希望小伙伴们看了有所帮助。
作为前端工程师的我们来说 IE对我们来说一定是不陌生的。在编写代码实现设计稿的时候 往往会出现各式各样有关IE的兼容性问题。对于兼容性的处理 方法也有很多。最简单的方法就是针对浏览器写不同的样式。 IE中每个浏览器都有一套属于自己的注释。属于自己浏览器的注释会专门在自己的浏览器中识别 而且他的浏览器并不识别。下面我们将为大家揭晓条件样式的编写方法。 是HTML语言中的注释。它是一种添加到代码中的笔记 让自己或你的团队成员明白你写的是什么 写到什么时候等等信息 这种注释并不会在浏览器中显示出来 但大家在查看页面的源代码时可以看到这一部分 如下面的一个简单实例： 复制代码代码如下: <!-- 这里是HTML注释 --> <div>HTML注释</div> 上面这段代码中部分中的内容就是注释部分了。那么我们若在上面的基础添加一个条件语句 就可以得到我们想要的条件注释。IE就有专属于自己的一套条件注释。条件注释的好处有很多 主要有让你的网站样式整洁清爽 其次是轻松兼容各个符合条件的浏览器。这些好处让我们瞬间对条件注释有了很大的兴趣。那么条件注释应该如何编写呢?下面我就一起来看看吧。 条件样式的编写方法 方法很简单 我们只需按正常的方法引入外部样式表 然后在外面嵌套条件注释即可。在具体使用条件注释语句之前 有几种条件注释属性含义我们必须要理解 并会使用： 1、gt(greate than):选择条件版本以上版本 不包含条件版本本身; 2、lt(less than):这个刚好与gt相反 表示的是选择条件版本以下的版本 不包含条件版本自身; 3、gte(greate than or equal):选择条件版本以上版本 并包含条件版本自身; 4、lte(less than or equal):选择条件版本以下的版本 并包含条件版本自身; 5、!:选择条件版本以外所有版本 无论高低。 条件样式的实例 1、支持所有IE浏览器 复制代码代码如下: <!--[if IE]> <link rel="stylesheet"href="https://www.aidi.net.cn//web/IE.css"type="text/css"/> <![endif]--> 2、支持除IE外的所有浏览器 复制代码代码如下: <!--[if !IE]> <link rel="stylesheet"href="https://www.aidi.net.cn//web/noIE.css"type="text/css"/> <![endif]--> 或 复制代码代码如下: <!--[if !IE]><!--> <link rel="stylesheet"href="https://www.aidi.net.cn//web/noIE.css"type="text/css"/> <!--<![endif]--> 3、仅仅支持IE10 复制代码代码如下: <!--[if IE 10]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/IE10.css"> <![endif]--> 4、仅仅支持IE9 复制代码代码如下: <!--[if IE 9]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/IE9.css"> <![endif]--> 5、仅仅支持IE8 复制代码代码如下: <!--[if IE 8]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/IE8.css"> <![endif]--> 6、仅仅支持IE7 复制代码代码如下: <!--[if IE 7]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/IE7.css"> <![endif]--> 7、仅仅支持IE6 复制代码代码如下: <!--[if IE 6]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/IE6.css"> <![endif]--> 8、支持IE10以下版本(IE9以及IE9以下版本) 复制代码代码如下: <!--[if lt IE 10]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie9Down.css"> <![endif]--> 或 复制代码代码如下: <!--[if lte IE 9]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie9Down.css"> <![endif]--> 9、支持IE9以下版本(IE8以及IE8以下版本) 复制代码代码如下: <!--[if lt IE 9]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie8Down.css"> <![endif]--> 或 复制代码代码如下: <!--[if lte IE 8]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie8Down.css"> <![endif]--> 10、支持IE8以下版本(IE7以及IE7以下版本) 复制代码代码如下: <!--[if lt IE 8]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie7Down.css"> <![endif]--> 或 复制代码代码如下: <!--[if lte IE 7]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie7Down.css"> <![endif]--> 11、支持IE7以下版本(IE6以及IE6以下版本) 复制代码代码如下: <!--[if lt IE 7]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie6Down.css"> <![endif]--> 或 复制代码代码如下: <!--[if lte IE 6]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie6Down.css"> <![endif]--> 12、高于IE9的版本(IE10以及IE10以上版本) 复制代码代码如下: <!--[if gt IE 9]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie10Up.css"> <![endif]--> 或 复制代码代码如下: <!--[if gte IE 10]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie10Up.css"> <![endif]--> 13、高于IE8的版本(IE9以及IE9以上版本) 复制代码代码如下: <!--[if gt IE 8]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie9Up.css"> <![endif]--> 或 复制代码代码如下: <!--[if gte IE 9]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie9Up.css"> <![endif]--> 14、高于IE7的版本(IE8以及IE8以上版本) 复制代码代码如下: <!--[if gt IE 7]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie8Up.css"> <![endif]--> 或 复制代码代码如下: <!--[if gte IE 8]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie8Up.css"> <![endif]--> 15、高于IE6的版本(IE7以及IE7以上版本) 复制代码代码如下: <!--[if gt IE 6]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie7Up.css"> <![endif]--> 或 复制代码代码如下: <!--[if gte IE 7]> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//web/ie7Up.css"> <![endif]--> 16、用条件注释引用Javascript标签 复制代码代码如下: <!--[if IE]> <script type="text/javascript"src="https://www.aidi.net.cn//web/IE.js"></script> <![endif]--> 上面就是展示了如何创建条件注释样式 大家可以根据自己的需求使用其中的一种或是多种 最后总结一下条件注释主要针对的是IE浏览器 所以我们也把他称作IE条件注释。如此一来 我们管理给IE兼容写的单独样式 就带来了极大的方便与好处。有了条件注释我们就可以轻松写出条件样式 就能解决个浏览器中的问题了。条件注释就为大家介绍到这里。
来源：爱蒂网
