HTML条件注释用法诠释

注释内容以样式为例,如下:

1、支持所有IE浏览器

<!--[if IE]>

<link rel="stylesheet" href="all-ie-only.css" type="text/css"/>

<![endif]-->

2、支持非IE浏览器

<!--[if !IE]>

<link rel="stylesheet" href="not-ie.css" type="text/css"/>

<![endif]-->

上面是除了IE浏览器外所有浏览器都识别这个样式,另外CSS-TRICKS的《How To Create an IE-Only Stylesheet》一文中提供了另一种写法:

<!--[if !IE]><!-->

<link rel="stylesheet" type="text/css" href="not-ie.css" />

<!--<![endif]-->

3、仅仅支持IE10

<!--[if IE 10]>

<link rel="stylesheet" type="text/css" href="ie10.css">

<![endif]-->

4、仅仅支持IE9

<!--[if IE 9]>

<link rel="stylesheet" type="text/css" href="ie9.css">

<![endif]-->

5、仅仅支持IE8

<!--[if IE 8]>

<link rel="stylesheet" type="text/css" href="ie8.css">

<![endif]-->

6、仅仅支持IE7

<!--[if IE 7]>

<link rel="stylesheet" type="text/css" href="ie7.css">

<![endif]-->

7、仅仅支持IE6

<!--[if IE 6]>

<link rel="stylesheet" type="text/css" href="ie6.css">

<![endif]-->

8、支持IE10以下版本(IE9以及IE9以下版本)

这种方法是样式表使用在低于IE10的浏览器,换句话说除了IE10以外的所有IE版本都将被支持。

<!--[if lt IE 10]>

<link rel="stylesheet" type="text/css" href="ie9-and-down.css">

<![endif]-->

也可以写成

<!--[if lte IE 9]>

<link rel="stylesheet" type="text/css" href="ie9-and-down.css">

<![endif]-->

前面我们也说过了lt和lte的区别,lt表示小于版本号,不包括条件版本号本身;而lte是小于或等于版本号,包括了版本号自身。

9、支持IE9以下版本(IE8以及IE8以下版本)

<!--[if lt IE 9]>

<link rel="stylesheet" type="text/css" href="ie8-and-down.css">

<![endif]-->

或:

<!--[if lte IE 8]>

<link rel="stylesheet" type="text/css" href="ie8-and-down.css">

<![endif]-->

10、支持IE8以下版本(IE7以及IE7以下版本)

<!--[if lt IE 8]>

<link rel="stylesheet" type="text/css" href="ie7-and-down.css">

<![endif]-->

或:

<!--[if lte IE 7]>

<link rel="stylesheet" type="text/css" href="ie7-and-down.css">

<![endif]-->

11、支持IE7以下版本(IE6以及IE6以下版本)

<!--[if lt IE 7]>

<link rel="stylesheet" type="text/css" href="ie6-and-down.css">

<![endif]-->

或:

<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="ie6-and-down.css">

<![endif]-->

上面8——11这几种方法,使用的是低于(lt)和低于或等于(lte)的方法来判断,我们也可以使用大于(gt)和大于或等于(gte)达到上面的效果:

12、高于IE9的版本(IE10以及IE10以上版本)

<!--[if gt IE 9]>

<link rel="stylesheet" type="text/css" href="ie10-and-up.css">

<![endif]-->

或:

<!--[if gte IE 10]>

<link rel="stylesheet" type="text/css" href="ie10-and-up.css">

<![endif]-->

13、高于IE8的版本(IE9以及IE9以上版本)

<!--[if gt IE 8]>

<link rel="stylesheet" type="text/css" href="ie9-and-up.css">

<![endif]-->

或:

<!--[if gte IE 9]>

<link rel="stylesheet" type="text/css" href="ie9-and-up.css">

<![endif]-->

14、高于IE7的版本(IE8以及IE8以上版本)

<!--[if gt IE 7]>

<link rel="stylesheet" type="text/css" href="ie8-and-up.css">

<![endif]-->

或:

<!--[if gte IE 8]>

<link rel="stylesheet" type="text/css" href="ie8-and-up.css">

<![endif]-->

15、高于IE6的版本(IE7以及IE7以上版本)

<!--[if gt IE 6]>

<link rel="stylesheet" type="text/css" href="ie7-and-up.css">

<![endif]-->

或:

<!--[if gte IE 7]>

<link rel="stylesheet" type="text/css" href="ie7-and-up.css">

<![endif]-->

16、高于IE5.5的版本(IE6以及IE6以上版本)

<!--[if gt IE 5.5]>

<link rel="stylesheet" type="text/css" href="ie6-and-up.css">

<![endif]-->

或:

<!--[if gte IE 6]>

<link rel="stylesheet" type="text/css" href="ie6-and-up.css">

<![endif]-->

注明:以上 内容来自浏览器兼容之旅的第一站:如何创建条件样式,转载请注明,谢谢...

对上文的一点补充:

17、指定多种IE版本

<!--[if (IE 6)|(IE 7)|(IE 8)]>

<link rel="stylesheet" type="text/css" href="ie6-7-8.css">

<![endif]-->

原文来自http://hi.baidu.com/skay010/item/4e47a5e6fd3081374ddcaf80

功能未经测试,先留着备用。有时间再来测试下效果

最新文章

  1. stack overflow--技术问答网站
  2. Web控件文本框Reset的功能
  3. UVa 10900 - So you want to be a 2n-aire?
  4. 06 Linux下Shell介绍
  5. Basic Operation about Linux
  6. HDU 2433 Travel (最短路,BFS,变形)
  7. 转】Maven学习总结(七)——eclipse中使用Maven创建Web项目
  8. Eclipse混淆文件导入Android Studio Gradle编译报input jar file is specified twice
  9. Docker 1.13 管理命令
  10. 提交变更(git commit)
  11. vue+element ui 表格自定义样式溢出隐藏
  12. 关于UR=A的测试
  13. Nginx之使用nginx搭建简单的文件服务器
  14. iozone的三大神器之一fileop
  15. fasttext与Linear SVC 分类测试结果
  16. 洛谷1288 取数游戏II
  17. 转:google测试分享-问题和挑战
  18. ie6下面不支持!important的处理方法
  19. 分分享知识-快乐自己: @Component注解的使用
  20. es6+最佳入门实践(12)

热门文章

  1. ActiveX in QT
  2. 《Programming WPF》翻译 第9章 6.我们进行到哪里了?
  3. paip.Adblock屏蔽onlinedown华军软件园的4秒下载广告总结..
  4. 图论专题训练1-D(K步最短路,矩阵连乘)
  5. Udp实现简单的聊天程序
  6. PHP连接Mysql服务器的操作
  7. 机房收费系统中的Grid++Report报表设计器的应用
  8. HDU 4362 Dragon Ball 线段树
  9. XTU OJ 1209 Alice and Bob 2014(嘉杰信息杯ACM/ICPC湖南程序设计邀请赛暨第六届湘潭市程序设计竞赛)
  10. [Hapi.js] Extending the request with lifecycle events