`

IE条件注释详解 .

 
阅读更多

在CSS布局中,还常常用到IE Hack。if IE起着非常大的作用!
if IE什么意思呢?下面就列举了一些在CSS常见的HACK控制语句。
作为IE的IF条件注释使用备忘,有些时候试用if IE而不是在css中使用hack,就能通过w3c验证。

<!--[if !IE]>除IE外都可识别<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
<!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

条件注释只能在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浏览器需要特殊处理的,才进行条件注释。

IE的有条件注释是一种专有的(因此是非标准的)、对常规(X)HTML注释的Miscrosoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块(不一定就是css,也可以是html代码,甚至是JavaScript代码)。尽管是非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的。有条件注释在Windows上的IE5中首次出现,并且得到了Widnows浏览器所有后续版本的支持。

IE的有条件注释是一种专有的(因此是非标准的)、对常规(X)HTML注释的Miscrosoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块。尽管是非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的。有条件注释在Windows上的IE5中首次出现,并且得到了Widnows浏览器所有后续版本的支持。

IE的有条件注释及其有效,而且非常容易记住。主要的缺点是这些注释需要放在HTML页面中,而不是放在CSS中。这样,当你不需要这些东西,或者有所更改的时候,就需要维护很多的地方。

让我们据几个例子来看看吧——

只有IE才能识别

因为只有IE5以上的版本才开始支持IE条件注释,所有“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。

<!--[if IE]>
<style type="text/css">
 @import "test.css";
</style>
<![endif]-->
分享到:
评论

相关推荐

    IE 条件注释详解总结(附实例代码)

    顾名思义,有条件注释使你能够根据条件(比如... 让我们据几个例子来看看吧—— 只有IE才能识别 因为只有IE5以上的版本才开始支持IE条件注释,所有“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。 代码如

    IE的有条件注释判定IE版本详解(附实例代码)

    有条件注释在Windows上的IE5中首次出现,并且得到了Widnows浏览器所有后续版本的支持。 IE的有条件注释及其有效,而且非常容易记住。主要的缺点是这些注释需要放在HTML页面中,而不是放在CSS中。这样,当你不需要...

    CSS条件注释详解(根据不同浏览器加载CSS)

    由于浏览器版本的不同,对CSS里某些元素的解释也不一样,针对浏览器版本不同而选择不同CSS的代码,其实我们还可以利用条件注释的方法来达到类似的目的,什么是条件注释,在此简单介绍一下,无非就是一些if判断啦,...

    css padding属性兼容ie6,ie8,firefox实例详解

    本文章简单的介绍一下关于padding兼容ie6,ie8,firefox的做法,因为不同浏览器对padding理解不一样,所以在浏览时会有点差别。 padding 简写属性在一个声明中设置所有内边距属性。 说明 这个简写属性设置元素所有内...

    JS 正则表达式判断各个浏览器代码详解

    注释都在代码里面了。很详细。 只判断了IE 火狐 谷歌 因为我没装其他浏览器了,所以呵呵。当然如果要判断其他浏览器。基本代码都是一样的了。 代码如下: (function(){ window.sys={}; var ua=navigator.userAgent....

    andorid自定义view Scroller详解含Demo 记录学习

    Scroller的使用方法 (代码中也会将详细的使用步骤进行注释) 1.创建Scroller实例 2.调用startScroller()方法初始化滚动数据并刷新界面 3.重写computescroll()方法,并在内部完成平滑滚动逻辑 其中的scrollTo() ,...

    详解no input file specified 三种解决方法

    方法一:改PHP.ini中的doc_root行,打开ini文件注释掉此行,然后重启IIS 方法二: 请修改php.ini 找到 ; cgi.force_redirect = 1 去掉前面分号,把后面的1改为0 即 cgi.force_redirect = 0 二.apache No ...

    CSS网站布局实录 (第二版)PDF版

    7.2 IE条件注释功能 7.3 盒模型问题 7.3.1 盒模型hack 7.3.2 简单盒模型hack方法 7.4 IE捉迷藏 7.5 ul的不同表现 7.6 IE 3px问题 7.7 高度不适应 7.8 IE6断头台问题 7.9 容器不扩展问题 7.10 IE7浏览器的一些变化 第...

    jsp 中HttpClient中的POST方法实例详解

    jsp 中HttpClient中的POST方法实例详解 POST方法用来向目的服务器发出请求,要求它接受被附在请求后的实体,并把它当作请求队列(Request-Line)中请求URI所指定资源的附加新子项。POST被设计成用统一的方法实现下列...

    详解Android中Glide与CircleImageView加载圆形图片的问题

    最近在项目中遇到了一个奇怪的问题,Glide和CircleImageView一起...注释掉这两句代码即可。 .placeholder(R.drawable.normal_photo) .error(R.drawable.normal_photo) Glide 加载时的代码: Glide.with(mContext)

    android尺子的自定义view——RulerView详解

    因为跟自己要使用的view稍有不同 所以做了一些修改,修改的注释都放在代码中了,特此记录一下。 首先是一个自定义View: public class RuleView extends View { private Paint paint; private Context context; ...

    css入门笔记

    选择器详解 1.通用选择器 *{样式} 2.元素选择器 p{样式} 3.类选择器 1. 声明 .class名{样式} 2.引用可以引用多个类名用空格隔开 类名1 类名2 "&gt; 4.id选择器 #id名{样式} 3.特殊选择器 1.群组选择器 #...

    Android 模仿iPhone列表数据View刷新动画详解

     效果看完了,就来看下上面效果实现的具体代码吧, 中间会把我自己试验的、犯的错误都以注释的形式写下来的, 大家使用的时候别出错就行了!先来看下使用的布局文件,很简单的布局: XML/HTML代码

    html入门到放弃笔记

    1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper ...

Global site tag (gtag.js) - Google Analytics