`

<转>html中判断IE版本

阅读更多

转至:http://www.oschina.net/code/snippet_575130_12609

html判断IE版本
1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
2. <!--[if IE]> 所有的IE可识别 <![endif]-->
3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->
7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->
10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if lte IE 6]>……<![endif]-->


Ite:less than or equal to意思是小于或等于IE6浏览器,用于IE浏览器的条件注释,常用于CSShack,针对IE的JS等。
在进行WEB标准网页的学习和应用过程中,网页对浏览器的兼容性是经常接触到的一个问题。其中因微软公司的Internet Explorer(简称IE)占据浏览器市场的大半江山,此外还有Firefox、Opera等。需要对这些浏览器进行兼容。
同时,单就IE而言,因IE版本的升级更替,目前浏览者使用的主要停留在 IE5(IE5.5)、IE6和IE7这三个版本中。而这3个版本对于我们制作的WEB标准网页(XHTML+CSS)解释执行的显示状况不尽相同。并 且,其他非IE浏览器与IE对某些CSS解释也不一样。所以,通过IE浏览器中的专有条件注释可有针对性的进行相关属性的定义。
条件注释只能用于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浏览器需要特殊处理的,才进行条件注释。
在HTML文件里,而不能在CSS文件中使用。

分享到:
评论

相关推荐

    html判断IE版本

    &lt;title&gt;HTML判断IE版本&lt;/title&gt; &lt;style&gt; .ie8-and-below { display: none; } &lt;/style&gt; &lt;script&gt; var ieVersion = getIEVersion(); if (ieVersion &lt;= 8) { document.documentElement.className += ' ie8-...

    C#编程经验技巧宝典

    112&lt;br&gt;&lt;br&gt;0188 如何在ASP.NET中显示当前IE浏览器头信息 113&lt;br&gt;&lt;br&gt;5.6 其他应用技巧 114&lt;br&gt;&lt;br&gt;0189 如何判断年份是否为闰年 114&lt;br&gt;&lt;br&gt;0190 如何根据年份判断十二生肖 114&lt;br&gt;&lt;br&gt;0191 如何根据IP...

    FREENESS(个人助理[交流、管理、上网安全]) v2.1

    &lt;br&gt; ★Freeness能记录重要目录:window, system32,和temp目录下&lt;br&gt; 执行文件的修改记录,方便用户判断是否被病毒、木马攻击。&lt;br&gt;&lt;br&gt; 8、屏幕编辑器: &lt;br&gt; 一个"即时贴“性质的编辑窗口,可以在需要的时候按热键...

    隔行变色和鼠标滑过变色

    &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; ``` 在这段代码中,通过`...

    获取IE信息的JavaScript脚本

    &lt;p&gt;浏览器版本: &lt;span id="browserVersion"&gt;&lt;/span&gt;&lt;/p&gt; &lt;p&gt;用户代理: &lt;span id="userAgent"&gt;&lt;/span&gt;&lt;/p&gt; &lt;script&gt; document.getElementById('browserName').innerText = navigator.appName; document....

    IE6/7/8中Option元素未设value时Select将获取空字符串

    在IE6、IE7以及IE8这三款老版本的Internet Explorer浏览器中,存在一个与`&lt;option&gt;`元素和`&lt;select&gt;`元素交互时的特殊行为。标题所提及的问题是,当`&lt;option&gt;`标签没有明确设置`value`属性时,用户在选择该选项后,`...

    JavaScript实例讲解

    &lt;title&gt;在Html文档中嵌入JavaScript&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;br&gt;&lt;p align="center"&gt;这是Html文档的内容。&lt;/p&gt; &lt;br&gt;&lt;script language="JavaScript"&gt; &lt;!-- document.write("&lt;center&gt;这是使用JavaScript输出的...

    IE浏览器版本过低提示 HTML模板页

    在创建“IE浏览器版本过低提示”页面时,开发者会利用HTML的特定元素和属性来构建提示信息,如`&lt;h1&gt;`用于大标题,`&lt;p&gt;`用于段落,`&lt;a&gt;`用于链接,让用户能够点击升级浏览器。此外,可能还会使用`&lt;meta&gt;`标签来设置...

    浏览器版本低于IE8验证

    &lt;script src="iealert.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; ``` `iealert`可能是这个功能的一个样式文件,用于自定义警告对话框的外观,或者提供一些额外的CSS样式,以使其更符合网站的设计风格。 总的来说,这个项目...

    IE8兼容性和判断IE浏览器版本

    IE8兼容性和判断IE浏览器版本 IE8兼容性是前端开发中经常遇到的问题,特别是在使用老版本的IE浏览器时。下面是IE8兼容性中的一些常见问题和解决方法: 首先,IE8只支持jquery2.0以下的版本,因此在使用jquery时...

    HTML5&CSS3网页制作:音视频中的source元素.pptx

    小任务是尝试为一个`&lt;video&gt;`元素添加多个文件源,并在不同浏览器(如IE、Google Chrome、Firefox等)中测试其兼容性,以确保在各种环境下的播放效果。 通过这样的实践,不仅可以加深对`&lt;source&gt;`元素的理解,也能...

    VB网络编程实例

    &lt;br/&gt;◆ 176.htm 你也可以YAI--VB5中Winsock控件的使用 &lt;br/&gt;◆ 177.htm 判断一个文件是否在IE的缓存中 &lt;br/&gt;◆ 178.htm 启动拨号网络中的连接 &lt;br/&gt;◆ 179.htm 浅谈HTTP协议(二)--返回值 &lt;br/&gt;◆ 180.htm 浅谈...

    JavaScript Table行定位效果

    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;body&gt; &lt;table cellpadding="5" cellspacing="0" border="1" width="100"&gt; &lt;tr style="position:relative; left:100px;"&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td...

    html5测试题.docx

    - **D** `&lt;label&gt;`:不是HTML5的新标签,它在HTML4中就已经存在,用于为表单控件提供描述性的标签。 **答案**: D #### 2. HTML5中用于定义图形的标签是() - **解析**: HTML5提供了多种方式来处理图形和媒体。 ...

    Loading加载.doc

    `if (document.layers)`检查是否支持Netscape的层技术,`document.all`检查是否为IE4或更早版本,`document.getElementById`则用于检测是否支持DOM元素ID获取。这些条件判断确保了在不同浏览器中都能正确地隐藏加载`...

    css中IE判断语句 if !IE

    本文将详细介绍CSS中的IE判断语句,以及如何利用条件注释进行浏览器特定的代码处理。 IE条件注释是一种特殊的HTML注释格式,只在Internet Explorer中起作用,用于在不同的IE版本之间插入特定的代码段。这些条件注释...

    写的htc的数据表格

    - 第一行通常是表头,用`&lt;th&gt;`标签表示,但在本例中使用了`&lt;td&gt;`,并设置了加粗字体来模拟表头。 - **数据填充**: - 该表格目前未填充实际数据,仅设置了占位符行。 ### 5. 兼容性和可维护性 - **浏览器兼容性*...

    【JavaScript源代码】Vue实现简单购物车小案例.docx

    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;link rel="stylesheet" href="/css/index.css"&gt; ...

    Discuz! X3.4 简体中文-PHP

    &lt;/p&gt;&lt;p&gt;6、修复 版块页未判断是否可发帖就显示验证码的问题&lt;/p&gt;&lt;p&gt;7、修复UC后台文件里的目录路径获取方式,方便站长更换入口名称&lt;/p&gt;&lt;p&gt;8、优化 语音验证码通过HTML5播放,放弃Flash&lt;/p&gt;&lt;p&gt;9、修复 系统内存在的...

Global site tag (gtag.js) - Google Analytics