CSS条件注释的使用详解教材

声明:以下内容收集于网络,经才子理解后,加以整理编辑,转载请保留才子小站的链接,谢谢!!!
才子手记:http://blog.54caizi.com

玩WEB重构的朋友相信都有一个同样的苦恼,那就是由于浏览器版本的不同,对CSS里某些元素的解释也不一样,才子当然也碰到同样的问题,也收集了一些解决方法,才子之前贴过两个针对浏览器版本不同而选择不同CSS的代码,有兴趣的朋友自己找找吧。

其实我们还可以利用条件注释的方法来达到类似的目的,什么是条件注释,才子也在此简单介绍一下,无非就是一些if判断啦,呵呵,但这些判断不是在脚本里执行的,而是直接在html代码里执行的,下面来介绍一下使用方法吧。

<!--[if XXX]>
这里是正常的html代码
<![endif]-->

这里XXX是一些特定的东东,在此列表几个出来,详细介绍各自的含义:
<!--[if IE]> / 如果浏览器是IE /
<!--[if IE 5]> / 如果浏览器是IE 5 的版本 /
<!--[if IE 6]> / 如果浏览器是IE 6 的版本 /
<!--[if IE 7]> / 如果浏览器是IE 7 的版本 /
......

上面是几个常用的判断IE浏览器版本的语法,下面再来介绍一下相对比较少用的逻辑判断的参数:
有几个参数:lte,lt,gte,gt及!
各自的详细解释如下:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同,^0^

也写几条例句吧:
<!--[if gt IE 5.5]> / 如果IE版本大于5.5 /
<!--[if lte IE 6]> / 如果IE版本小于等于6 /
<!--[if !IE]> / 如果浏览器不是IE /
......

看到这里相信大家都已经明白了条件注释的用法了,OK,那来举个例子吧:

<!-- 默认先调用css.css样式表 -->
<link rel="stylesheet" type="text/css" href="css.css" />

<!--[if !IE]>
<!-- 非IE下调用1.css样式表 -->
<link rel="stylesheet" type="text/css" href="1.css" />
<![endif]-->

<!--[if lt IE 6]>
<!-- 如果IE浏览器版本小于6,调用2.css样式表 -->
<link rel="stylesheet" type="text/css" href="2.css" />
<![endif]-->

详细使用方法已经介绍完了,不得不提的一点就是:
条件注释是在IE5.0/Win以后才被IE支持的,对于IE5以前的浏览器是无效的,不过,应该没什么人还在使用IE4的版本了吧。^0^

(0)

相关推荐

  • CSS条件注释的使用详解教材

    声明:以下内容收集于网络,经才子理解后,加以整理编辑,转载请保留才子小站的链接,谢谢!!!才子手记:http://blog.54caizi.com 玩WEB重构的朋友相信都有一个同样的苦恼,那就是由于浏览器版本的不同,对CSS里某些元素的解释也不一样,才子当然也碰到同样的问题,也收集了一些解决方法,才子之前贴过两个针对浏览器版本不同而选择不同CSS的代码,有兴趣的朋友自己找找吧. 其实我们还可以利用条件注释的方法来达到类似的目的,什么是条件注释,才子也在此简单介绍一下,无非就是一些if判断啦,呵

  • 微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi

  • java并发等待条件的实现原理详解

    前言 前面介绍了排它锁,共享锁的实现机制,本篇继续学习AQS中的另外一个内容-Condition.想必学过java的都知道Object.wait和Object.notify,同时也应该知晓这两个方法的使用离不开synchronized关键字.synchronized是jvm级别提供的同步原语,它的实现机制隐藏在jvm实现中.作为Lock系列功能中的Condition,就是用来实现类似 Object.wait和Object.notify 对应功能的. 使用场景 为了更好的理解Lock和Condit

  • python不相等的两个字符串的 if 条件判断为True详解

    今天遇到一个非常基础的问题,结果搞了好久好久.....赶快写一篇博客记录一下: 本来两个不一样的字符串,在if 的条件判断中被判定为True,下面是错误的代码: test_str = 'happy' if test_str == 'good' or 'happy': #这样if判断永远是True,写法错误 print('aa') else: print('bbbb') 这是正确的代码: test_str = 'happy' if test_str == 'good' or test_str ==

  • CSS自定义滚动条样式案例详解

    CSS3自定义滚动条样式 -webkit-scrollbar 当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. 首先我们要了解滚动条.滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主要有三部分组成: ::-webkit-scrollbar   定义了滚动条整体的样式: ::-webkit-scrollbar-thum

  • 关于MyBatis plus条件构造器的逐条详解

    目录 条件构造器 说明 警告 说明 allEq 个别参数说明 eq 实例 ne gt ge lt le between notBetween like notLike likeLeft likeRight isNull isNotNull in 例 例 notIn inSql notInSql groupBy orderByAsc 实例 orderByDesc orderBy having func or and nested apply-拼接SQL 实例 last exists notExis

  • 使用Vite处理css less及postcss示例详解

    目录 1. css 2. less 3. postcss 4. 小结 1. css 当前,我们的 vite的基本使用 项目中是没有 css 代码的,但在真实的项目中,肯定会有 css 代码,那 Vite 能否帮助我们对 css 做支持呢?我们可以测试一下,在 src 目录下新建 css 文件夹,在 css 文件夹中新建 style.css 文件,内容如下: body { background-color: #f66; } 有了这个 css 文件后,先来思考一下,这个 css 文件现在有被打包吗?

  • JavaScript 条件判断使用技巧详解

    目录 引言 避免直接使用字符串作为条件 使用 Object 不符合预期,提前 return 使用 Map 配合 Object Map 也可以存储函数 尽量避免三目表达式和 switch 引言 本文花费很短的时间来介绍一下在 JavaScript 中如何编写更简单的条件判断,帮助你编写更简洁的代码和可读性更高的代码. 假如我们有一个颜色值转换十六进制编码的函数. function convertToHex(color) { if (typeof color === 'string') { if (

  • sql中的left join及on、where条件关键字的区别详解

    LEFT JOIN 关键字会从左表 (table_name1) 那里返回所有的行,即使在右表 (table_name2) 中没有匹配的行. LEFT JOIN 关键字语法 SELECT column_name(s) FROM table_name1 LEFT JOIN table_name2 ON table_name1.column_name=table_name2.column_name 注释:在某些数据库中, LEFT JOIN 称为 LEFT OUTER JOIN. 创建两张表并插入一些

  • 不同版本IE使用不同css(css条件注释语句用法)

    一.条件注释简介1.IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.2.条件注释只能用于IE5以上.3.如果你安装了多个IE,条件注释将会以最高版本的IE为标准.4.条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们.5.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容.二.条件注释属性gt : greater

随机推荐