使用条件注释判断 IE 浏览器版本
IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解。比如普通的HTML注释是:
<!--This is a comment-->
而只有IE可读的IE条件注释是:
<!--[if IE]> <![endif]-->
“非IE条件注释”:
<!--[if !IE]>--> non-IE HTML Code <!--<![endif]-->
“非特定版本IE条件注释”(很少用到):
<!--[if ! lt IE 7]><![IGNORE[--><![IGNORE[]]>Code for browsers that match the if condition<!--<![endif]-->
简而言之,除了“Windows上的IE”之外的所有浏览器都会认为条件注释只是一段普通的HTML注释。你不能在CSS代码中使用条件注释。IE条件注释是很有用的对IE隐藏或者展现特定代码的方法,比起在CSS中用诡异的_/制造bug,利用IE条件注释来写CSS “hacks”是更合理的方法。通俗点,条件注释就是一些if判断,但这些判断不是在脚本里执行的,而是直接在html代码里执行的。
- 条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
- IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
- 条件注释使用的是HTML的注释结构,因此他们只能使用在HTML文件里,而不能在CSS文件中使用。
从语法上看这是相当合法的普通HTML注释。任何浏览器都会认为<!–和–>之间的部分是注释从而忽略它。但是IE也会看到其中[if IE]>,从而开始解释接下来的代码直到遇到<![endif]。所以,下面这些代码不会显示在任何其他浏览器中面。
通过“比较操作符”可以更灵活地对IE版本进行控制,用法是在IE前面加上“比较操作符”。合法的操作符如下:
- lte:就是Less than or equal to的简写,也就是小于或等于的意思。
- lt :就是Less than的简写,也就是小于的意思。
- gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
- gt :就是Greater than的简写,也就是大于的意思。
- ! :就是不等于的意思,跟javascript里的不等于判断符相同
示例:
- <!–[if gt IE 5.5]> / 如果IE版本大于5.5 /
- <!–[if lte IE 6]> / 如果IE版本小于等于6 /
- <!–[if !IE]> / 如果浏览器不是IE /
虽然看上去当你第一次使用条件注释的时候会更费时,但当你以后调试你的CSS的时候,就会发现非常方便。用条件注释你只需要写一遍HTML注释,而用bug你需要为每一条规则都写上又长又丑的代码,而且还经常是为了改变其他的hacks而写的hacks。除此之外条件注释对于不支持它的任何浏览器而言都是合法的HTML注释。以下为条件注释与CSS hacks的一些区别:
- Hacks是基于浏览器的bug,而这些bug最终可能会被修复。
- 条件注释是基于IE特定代码,这种识别机制任何时候都不会被移除。
- 每一个浏览器都能看见你的hacks,或许下一个版本或者一个新的浏览器会在你的hacks代码上出错。
- 只有IE才能看到条件注释,通过额外的“IE文件”来影响页面,其他浏览器根本就不会下载它。
- Hacks不能确保对哪些浏览器生效而对哪些不,用的hacks越多,代码越混乱。
- 条件注释利用版本匹配使得作者可以容易地对特定版本写代码。
本文链接:http://www.cnblogs.com/oooweb/p/ie-conditional-comments.html
使用条件注释判断 IE 浏览器版本的更多相关文章
- 条件注释判断IE浏览器版本
lt,lte,gt,gte分别表示什么 lt:小于当前版本 lte:小于或等于当前版本,包括本身 gt:大于当前版本 gte:大于或等于当前版本,包括本身 使用格式 // 如IE9以下(不包括IE9加 ...
- 条件注释判断IE浏览器
最近在用jquery 2.0 才知道已不支持IE6/7/8 但又不想换回 jquery 1.X; 找了一资料发现条件注释可以解决这个问题 这个也像程序中的条件判断,先来介绍几个单词lt :Less t ...
- HTML条件注释判断浏览器版本命令
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![ ...
- 条件注释判断IE版本
在学习Bootstra的时候看到这么一句话, <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media ...
- 这是一个用于判断IE浏览器版本的紧凑脚本
这是一个用于判断IE浏览器版本的紧凑脚本IE浏览器,不管它们是什么版本,总是与Web标准有些不兼容.对于编码人员来说,这很困难.为了考虑IE的兼容性,不管它是写CSS还是写JS,IE通常都会被特殊处理 ...
- 判断IE浏览器版本
//判断IE浏览器版本 function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isI ...
- 通过HTML条件注释判断IE版本的HTML语句详解<!--[if IE]> <![endif]-->
我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...
- 条件注释+JS实现各版本IE浏览器className
最近又开始忙了,项目中又遇到了可恶的IE Hack问题,各种Hack的看着让自己都觉得恶心,于是决定改造一番. 首先请出条件注释语句: 之前用过的条件注释 <!--[if lt IE 7]> ...
- IE条件注释,嗅探低版本IE用户,并引导升级
一.科普IE条件注释 IE条件注释功能是条件注释是IE特有的一种功能,能对IE系列产品进行单独的XHTML代码处理,注意,主要是针对XHTML,而非CSS.条件注释功能非常强大,可以进行true和fa ...
随机推荐
- HDU 4747 Mex 递推/线段树
题目链接: acm.hdu.edu.cn/showproblem.php?pid=4747 Mex Time Limit: 15000/5000 MS (Java/Others)Memory Limi ...
- CCF——折点计数201604-1
问题描述 给定n个整数表示一个商店连续n天的销售量.如果某天之前销售量在增长,而后一天销售量减少,则称这一天为折点,反过来如果之前销售量减少而后一天销售量增长,也称这一天为折点.其他的天都不是折点.如 ...
- PAT 甲级 1099 Build A Binary Search Tree
https://pintia.cn/problem-sets/994805342720868352/problems/994805367987355648 A Binary Search Tree ( ...
- vue ui components
vue ui components h_ui https://www.npmjs.com/~hs_ui https://www.npmjs.com/package/h_ui_beta https:// ...
- IE 之 userData 模拟 localStorage
引 chrome, safari, firefox, ie 9都支持 localStorage. 但可恶的是,中国 ie 6 占有最大的比例. 使用 cookie 不但容量有限,而且给我们增加了不 ...
- uoj54-bzoj3434-时空穿梭
题意 在一个 \(n\) 维空间中,求一个点可以用一个 \(n\) 维向量 \((x_1,x_2,\dots x_n)\) 表示.现在要选出 \(c\) 个点,有三个限制: 设 \(x_i\) 表示任 ...
- 【uoj#48】[UR #3]核聚变反应强度 数论
题目描述 给出一个长度为 $n$ 的数列 $a$ ,求 $a_1$ 分别与 $a_1...a_n$ 的次大公约数.不存在则输出-1. 输入 第一行一个正整数 $n$ . 第二行 $n$ 个用空格隔开的 ...
- Ubuntu上搭建比特币运行环境
Ubuntu版本:16.04.3 Bitcoin Core版本:0.16 1. 比特币运行依赖的开源库 (1)必须依赖的库 库 目的 描述 libssl 加密 随机数生成,椭圆曲线加密算法 libbo ...
- 【Luogu3676】小清新数据结构题(动态点分治)
[Luogu3676]小清新数据结构题(动态点分治) 题面 洛谷 题解 先扯远点,这题我第一次看的时候觉得是一个树链剖分+线段树维护. 做法大概是这样: 我们先以任意一个点为根,把当前点看成是一棵有根 ...
- Communications link failure;;The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.
Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure::The ...