HTML下在IE浏览器中的专有条件注释
在进行WEB标准网页的学习和应用过程中,网页对浏览器的兼容性是经常接触到的一个问题。其中因微软公司的Internet Explorer(简称IE)占据浏览器市场的大半江山,此外还有Firefox、Opera等。需要对这些浏览器进行兼容。 同时,单就IE而言,因IE版本的升级更替,目前浏览者使用的主要停留在 IE5(IE5.5)、IE6和IE7这三个版本中。而这3个版本对于我们制作的WEB标准网页(XHTML+CSS)解释执行的显示状况不尽相同。并且,其他非IE浏览器与IE对某些CSS解释也不一样。所以,通过IE浏览器中的专有条件注释可有针对性的进行相关属性的定义。 原文地址:http://www.quirksmode.org/css/condcom.html 条件注释只能用于Explorer 5+ Windows(以下简称IE)(条件注释从IE5开始被支持)。如果你安装了多个IE,条件注释(Conditional comments)将会以最高版本的IE为标准(目前为IE 7)。 条件注释只能在windows Internet Explorer(以下简称IE)下使用,因此我们可以通过条件注释来为IE添加特别的指令。 通俗点,条件注释就是一些if判断,但这些判断不是在脚本里执行的,而是直接在html代码里执行的,
比如:
<!--[if IE]>
这里是正常的html代码
<![endif]-->
1,条件注释的基本结构和HTML的注释(<!-- -->)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2,IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3,条件注释使用的是HTML的注释结构,因此他们只能使用在HTML文件里,而不能在CSS文件中使用。 可使用如下代码检测当前IE浏览器的版本
(注意:在非IE浏览器中是看不到效果的)
<!--[if IE]>
<h1>您正在使用IE浏览器</h1>
<!--[if IE 5]>
<h2>版本 5</h2>
<![endif]-->
<!--[if IE 5.0]>
<h2>版本 5.0</h2>
<![endif]-->
<!--[if IE 5.5]>
<h2>版本 5.5</h2>
<![endif]-->
<!--[if IE 6]>
<h2>版本 6</h2>
<![endif]-->
<!--[if IE 7]>
<h2>版本 7</h2>
<![endif]-->
<![endif]-->
那如果当前的浏览器是IE,但版本比IE5还低,该怎么办呢,可以使用<!--[if ls IE 5]>,当然,根据条件注释只能在IE5+的环境之下,所以<!--[if ls IE 5]>根本不会被执行。
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同
Conditional comments属于CSS hack? 条件判断属于CSS hack吗? 严格地说是属于CSS hack。因为就好象其他真正的css hack一样,它使得我们可以给一些浏览器赋予特殊的样式,再则它不依赖于某个浏览器的BUG来控制另外一个浏览器(的样式)。除此之外,条件判断还能用来做一些超出CSS HACK范围的事情(虽然这种情况很少发生)。 因为条件判断不依赖于某个浏览器的hack,而是一个经过深思熟虑的特色功能,所以我相信它是可以被放心地使用的。当然,其他浏览器也有可能支持条件判断(到目前为止还没有),但是看起来,他们应该不会使用如<!--[if IE]>这样的语法。 应该如何应用条件注释 本文一开始就说明了,因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样,具体就是对CSS的解释不同,我们为了兼容这些,可运用条件注释来各自定义,最终达到兼容的目的。比如:
<!-- 默认先调用css.css样式表 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 如果IE浏览器版是7,调用ie7.css样式表 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 如果IE浏览器版本小于等于6,调用ie.css样式表 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
这其中就区分了IE7和IE6向下的浏览器对CSS的执行,达到兼容的目的。同时,首行默认的css.css还能与其他非IE浏览器实现兼容。 注意:默认的CSS样式应该位于HTML文档的首行,进行条件注释判断的所有内容必须位于该默认样式之后。 比如如下代码,在IE浏览器下执行显示为红色,而在非IE浏览器下显示为黑色。如果把条件注释判断放在首行,则不能实现。该例题很能说明网页对IE浏览器和非IE浏览器间的兼容性问题解决。
<style type="text/css">
body{ background-color: #000; }
</style>
<!--[if IE]>
<style type="text/css">
body{ background-color: #F00; }
</style>
<![endif]-->
同时,有人会试图使用<!--[if !IE]>来定义非IE浏览器下的状况,但注意:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下非单不是执行该条件下的定义,而是当做注释视而不见。 正常就是默认的样式,对IE浏览器需要特殊处理的,才进行条件注释 详细出处参考:http://www.jb51.net/article/9575.htm
HTML下在IE浏览器中的专有条件注释的更多相关文章
- HTML中的IE条件注释,让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案
最近的项目中,因为需要兼容IE7,IE8,IE9,解研究了IE的条件注释,顺手写下来备忘. HTML中的IE条件注释 IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解. ...
- 浏览器兼容处理(HTML条件注释、CSSHack和JS识别)
前面的话 本文中所有IEx+代表包含x及x以上:IEx-代表包含x及x以下,仅个人习惯.例:IE7+代表IE7.IE8…… 本文中所有例子全部经过测试,欢迎交流. HTML识别 条件注释法(IE10+ ...
- HTML中的IE条件注释
IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解.比如普通的HTML注释是: <!--This is a comment--> 而只有IE可读的IE条件注释是 ...
- 关于CSS中对IE条件注释的问题
一.通用区分方式:IE6.IE7能识别*,标准浏览器(如FF)不能识别*:IE6能识别*,但不能识别 !important:IE7能识别*,也能识别 !important:IE8能识别\0,不能识别* ...
- HTML中的Hack条件注释语句
IE 条件注释判断语句是 IE 特有的功能,通过 HTML 注释中的条件语句能让不同的 IE 版本识别注释中的内容 自IE10起,标准模式不再支持条件注释 条件注释语句中可以是HTML.CSS也可以是 ...
- JavaScript权威指南--WEB浏览器中的javascript
知识要点 1.客户端javascript window对象是所有客户端javascript特性和API的主要接入点.它表示web浏览器的一个窗口或窗体,并且可以用window表示来引用它.window ...
- 渗透技巧——导出Chrome浏览器中保存的密码
0x00 前言 在后渗透阶段,获得权限后需要搜集目标系统的信息.信息越全面,越有助于进一步的渗透.对于Windows系统,用户浏览器往往包含有价值的信息. 在之前的文章<本地密码查看工具LaZa ...
- web浏览器中的javascript -- 2
在html里嵌入javascript: 在html文档里嵌入客户端javascript代码有4种方式: 1.内联,放置在<script>和</script>标签对之间; 2.放 ...
- IE中的条件注释(转载自网络)
IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句,作用是可以灵活的为不同IE版本浏览器导入不同html元素,如:样式表,html标签等.很显然这种方法的最大好处就在于属于微软官方给出的兼容解决 ...
随机推荐
- linux用户修改用户shell
要拒绝系统用户登录,可以将其shell设置为/usr/sbin/nologin或者/bin/false # usermod -s /usr/sbin/nologin username 或者 # use ...
- [MySQL] gap lock/next-key lock浅析
当InnoDB在判断行锁是否冲突的时候, 除了最基本的IS/IX/S/X锁的冲突判断意外, InnoDB还将锁细分为如下几种子类型: record lock (RK) 记录锁, 仅仅锁住索引记录的一行 ...
- 前端内容转译html
其他地方采集过来的可以转译下,试试这个:var returnReg = /\n/g; detail = detail.replace(returnReg,""); var reg ...
- ansible安装配置及最佳实践roles
ansible是什么? ansible是一款轻量级配置管理工具,用于远程批量部署.安装.配置.类似的还有puppet.saltstack,各有所长,任君自选. 官方文档:http://docs.ans ...
- Linux Supervisor的安装与使用入门---Ubuntun
Linux Supervisor的安装与使用入门 在linux或者unix操作系统中,守护进程(Daemon)是一种运行在后台的特殊进程,它独立于控制终端并且周期性的执行某种任务或等待处理某些发生的事 ...
- HDU 1686 Oulipo(KMP变形求子串出现数目(可重))
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1686 题目大意:给两个字符串A,B求出A中出现了几次B(计算重复部分). 解题思路:稍微对kmp()函 ...
- python抓取链家房源信息(二)
试着用scrapy将之前写的抓取链家网信息的重新写了写 然后先是用了第一页的网页作为测试,调试代码,然后发现总是抓取的时候遇见了 类似于这样的问题,并且抓取不到信息 2017-03-28 17:52: ...
- jquery li a 样式
jQuery(".CwebtopNavContainer").find("li:last a").css("color","red ...
- HNOI 2014
D1T1:画框 frame 题意:给你两个n阶正整数方阵,请你求最大的\( \sum_{i = 1}^{n} A_{i, p_i}\times \sum_{i = 1}^{n} B_{i, p_i} ...
- scrapy 学习笔记1
最近一段时间开始研究爬虫,后续陆续更新学习笔记 爬虫,说白了就是获取一个网页的html页面,然后从里面获取你想要的东西,复杂一点的还有: 反爬技术(人家网页不让你爬,爬虫对服务器负载很大) 爬虫框架( ...