HTML下在IE浏览器中的专有条件注释

时间:2022-09-07 19:12:00

在进行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浏览器中的专有条件注释的更多相关文章

  1. HTML中的IE条件注释,让低版本IE也能正常运行HTML5&plus;CSS3网站的3种解决方案

    最近的项目中,因为需要兼容IE7,IE8,IE9,解研究了IE的条件注释,顺手写下来备忘.  HTML中的IE条件注释 IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解. ...

  2. 浏览器兼容处理&lpar;HTML条件注释、CSSHack和JS识别&rpar;

    前面的话 本文中所有IEx+代表包含x及x以上:IEx-代表包含x及x以下,仅个人习惯.例:IE7+代表IE7.IE8…… 本文中所有例子全部经过测试,欢迎交流. HTML识别 条件注释法(IE10+ ...

  3. HTML中的IE条件注释

    IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解.比如普通的HTML注释是: <!--This is a comment--> 而只有IE可读的IE条件注释是 ...

  4. 关于CSS中对IE条件注释的问题

    一.通用区分方式:IE6.IE7能识别*,标准浏览器(如FF)不能识别*:IE6能识别*,但不能识别 !important:IE7能识别*,也能识别 !important:IE8能识别\0,不能识别* ...

  5. HTML中的Hack条件注释语句

    IE 条件注释判断语句是 IE 特有的功能,通过 HTML 注释中的条件语句能让不同的 IE 版本识别注释中的内容 自IE10起,标准模式不再支持条件注释 条件注释语句中可以是HTML.CSS也可以是 ...

  6. JavaScript权威指南--WEB浏览器中的javascript

    知识要点 1.客户端javascript window对象是所有客户端javascript特性和API的主要接入点.它表示web浏览器的一个窗口或窗体,并且可以用window表示来引用它.window ...

  7. 渗透技巧——导出Chrome浏览器中保存的密码

    0x00 前言 在后渗透阶段,获得权限后需要搜集目标系统的信息.信息越全面,越有助于进一步的渗透.对于Windows系统,用户浏览器往往包含有价值的信息. 在之前的文章<本地密码查看工具LaZa ...

  8. web浏览器中的javascript -- 2

    在html里嵌入javascript: 在html文档里嵌入客户端javascript代码有4种方式: 1.内联,放置在<script>和</script>标签对之间; 2.放 ...

  9. IE中的条件注释&lpar;转载自网络&rpar;

    IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句,作用是可以灵活的为不同IE版本浏览器导入不同html元素,如:样式表,html标签等.很显然这种方法的最大好处就在于属于微软官方给出的兼容解决 ...

随机推荐

  1. 开机取消显示 系统准备工具&lpar;Sysprep&rpar;

    问题: 解决办法: 1.关闭系统准备工具 3.14 2.桌面  ---  开始 ---  运行  ----  输入  XCOPY %windir%\System32\svchost.exe %wind ...

  2. &lbrack;Ruby01&rsqb;Class&comma; Module&comma; Object&comma;Kernel的关系

    puts Class.ancestorsputs '11111111111111111111'puts Module.ancestorsputs '2222222222222222222'puts O ...

  3. 关于ios的手势识别&lpar;GestureRecognizers&rpar;讲解

    大家都知道,苹果的设备,不管是mac机器还是iPhone或iad,都支持多点触控,进而延伸了多种手势识别的功能.这为用户带来了很大的便携性和多样灵活性,极大的方便了用户的使用.足以见手势识别(Gest ...

  4. RadHat搭建内网YUM源server

    前言:随着内网linuxserver越来越多,在每台server上安装软件.都要先把安装盘上传上去.在配置本地yum服务,即麻烦又费时.能够在内网的一台linuxserver上安装yum服务,然后其它 ...

  5. c&num;配置文件的简单操作

    // 配置文件 <?xml version="1.0" encoding="utf-8" ?> <configuration> < ...

  6. 天龙八步&amp&semi;quot&semi;细说浏览器输入URL后发生了什么

    本文摘要: 1.DNS域名解析: 2.建立TCP连接: 3.发送HTTP请求: 4.服务器处理请求: 5.返回响应结果: 6.关闭TCP连接: 7.浏览器解析HTML: 8.浏览器布局渲染: 总结 输 ...

  7. Android IllegalArgumentException&colon; Cannot draw recycled bitmaps解决方法

    在编码图集过程中,出现了Android IllegalArgumentException: Cannot draw recycled bitmaps错误. 大致意思是:不能使用已经被回收的bitmap ...

  8. 5&period;枚举和注解&lowbar;EJ

    第30条: 用enum代替int常量 枚举类型是指由一组固定的常量组成合法值得类型.例如一年中的季节,太阳系中的行星或一副牌中的花色.在开发中我们经常在类使用static final来定义一个int常 ...

  9. AngularJS中的&dollar;http缓存以及处理多个&dollar;http请求

    在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去. ■ 处理多个$ ...

  10. 网络基础知识 tcp

    网络基础相关的知识(1)架构a. C / S架构: client客户端和server服务器端 优势: 能充分发挥PC机的性能b. B / S架构: browser浏览器和server服务器 隶属于C ...