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标签等.很显然这种方法的最大好处就在于属于微软官方给出的兼容解决 ...
随机推荐
- python爬虫多线程编程
#使用了线程库 import threading from queue import Queue from bs4 import BeautifulSoup import json import re ...
- BZOJ 2049: [Sdoi2008]Cave 洞穴勘测——LCT
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2049 省选之前来切一道数据结构模板题. 题意 这是一道模板题. N个点,M次操作,每次加边/ ...
- TCP的状态兼谈Close_Wait和Time_Wait的状态
原文链接: http://www.2cto.com/net/201208/147485.html TCP的状态兼谈Close_Wait和Time_Wait的状态 一 TCP的状态: 1).LIST ...
- hive学习(八)hive优化
Hive 优化 1.核心思想: 把Hive SQL 当做Mapreduce程序去优化 以下SQL不会转为Mapreduce来执行 select仅查询本表字段 where仅对本表字段做条件过滤 Ex ...
- EF – 1.模式
3种数据库 code first model first database first 创建EF http://www.cnblogs.com/tangge/p/3834578.html DbSet ...
- 二叉排序树实现(C++封装)
设计思路 设计一个类,根结点只可读取,具备构造二叉树.插入结点.删除结点.查找. 查找最大值.查找最小值.查找指定结点的前驱和后继等功能接口. 二叉排序树概念 它或者是一棵空树:或者是具有下列性质的二 ...
- Recursion in Java
Recursion in Java 递归无出口 public class RecursionExample1 { public static void p() { System.out.println ...
- c# RabbitMQ 发送消息
参考地址:<C#使用RabbitMQ> C#操作RabbitMQ需要引用RabbitMQ的DLL,地址是:http://www.rabbitmq.com/releases/rabbitmq ...
- elementUI 学习之获取输入框的内容
<div id="app"> <el-input v-model="input1" placeholder="请输入内容" ...
- Python之路【第六篇】:模块与包
目录 一 模块 3.1 import 3.2 from ... import... 3.3 把模块当做脚本执行 3.4 模块搜索路径 3.5 编译python文件 3.6 标准模块 3.7 dir ...