[Web开发] 在HTML代码里面如何判断IE版本

在上一篇blog里面提到IE有不同的显示模式以及如何用Javascript 来动态判定。 Web开发者可以根据不同显示模式导入不同的内容。
这篇blog 主要讲如何让静态HTML代码根据不同IE版本显示不同内容。 这里的技巧就是利用IE的HTML注释表达式。
HTML 的注释格式是 <!-- Comment content --> , IE 对HTML注释做了一些扩展,使之可以支持条件判断表达式:
<!--[if expression]> HTML <![endif]--> 当表达式expression 为True 的时候,显示 HTML 内容。
例子:
view plaincopy to clipboardprint?
<!--[if IE 5]>
<p>Welcome to Internet Explorer 5.</p>
<![endif]-->
<!--[if IE 5]>
<p>Welcome to Internet Explorer 5.</p>
<![endif]-->
和编程语言类似,这里的表达式还支持大于(gt)、小于(lt)、 与或非 等操作符。 下面是一些例子。
[if IE] 判断是否IE
[if IE 7] 判断是否是IE7
[if !IE] 判断是否不是IE
[if lt IE 5.5] 判断是否是IE5.5 以下版本。 (<)
[if lte IE 6] 判断是否等于IE6 版本或者以下 (<=)
[if gt IE 5] 判断是否IE5以上版本 (> )
[if gte IE 7] 判断是否 IE7 版本或者以上
[if !(IE 7)] 判断是否不是IE7
[if (gt IE 5)&(lt IE 7)] 判断是否大于IE5, 小于IE7
[if (IE 6)|(IE 7)] 判断是否IE6 或者 IE7
代码示例:
view plaincopy to clipboardprint?
<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->
<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>
<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->
<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

注:IE5 以下的版本不支持这种注释扩展。 不过现在也很难找到IE4了 ... :)

时间: 2024-10-08 10:14:26

[Web开发] 在HTML代码里面如何判断IE版本的相关文章

java web开发中,如何查看JSP和Servlet版本 (转)

原文出处:http://blog.163.com/qiu_yin_good/blog/static/16732934920123277481492/ 在看<struts2权威指南>的时候,书上很多处都提到环境要支持的JSP,Servlet版本.如果版本低,会出现异常.或者需要修改web.xml等. 现在记录下如何看自己java  web工程的JSP和servlet版本. 我的tomcat版本是7.0.26 方法:打开tomcat/lib,找到jsp-api.jar和servlet-api.ja

java web开发常用的代码

基础代码 1.比较字符串,忽略大小写,直接用equalsIgnoreCase(),不要用toUpperCase(). if(codeSession.equalsIgnoreCase(code)) { out.print("trueCode"); } 日志 1.使用门面模式的slfj,并结合log4j,logback. 2.info.debug.error,要写清楚. 3.使用占位符,如下: log.info("用户id为: {} ", id); 4.提前判断,提高效

python web 开发——pycharm 提交代码到 GitHub上

1.下载git 并安装:https://git-scm.com/downloads 这里安装的是 Windows版本的 2.注册 gitbub 账号 ,这里就不介绍了 3.创建一个SSH  keys 打开  git bash ssh-keygen -t rsa -C "your email address" 4.按照这个路径找到这些文件 5.打开下面这个文件,得到类似于这些东西 6.去GitHub 上,的setting 中  new SSH  key 9.打开pycharm 配置git

七日Python之路--第十二天(Django Web 开发指南)

<Django Web 开发指南>.貌似使用Django1.0版本,基本内容差不多,细读无妨.地址:http://www.jb51.net/books/76079.html (一)第一部分 入门 (1)内置数字工厂函数 int(12.34)会创建一个新的值为12的整数对象,而float(12)则会返回12.0. (2)其他序列操作符 连接(+),复制(*),以及检查是否是成员(in, not in) '**'.join('**')   或  '***%s***%d' % (str, int)

高性能WEB开发 - 图片篇

一.缩小图片大小 当图片很多的时候,减少图片大小是提高下载速度最直接的方法. 1. 使用PNG8代替GIF(非动画图片),因为PNG8在效果一样的情况,图片大小比GIF要小. 2. 用fireworks处理PNG图片,在我们产品中很多PNG图片是美工直接用photoshop导出的, 后来让美工用fireworks处理PNG(大概的方式是选择保存为PNG8,删除背景色). 处理后100K的图片大小基本减少了3/4,但图片质量也会有少许降低,要看自己是否能接受. 3. 使用Smush.it(http

移动端web开发常见问题

上一篇总结了一些有关html5和css3的面试题,这一篇是有关于移动端web开发的常见问题,希望一样对你有一些帮助. Meta相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="a

Web开发入门学习笔记

公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本<细说PHP>,先跟着过一遍Web开发入门. HTTP协议 HTTP协议:所有的WWW文件都必须遵守HTTP协议,HTTP是客户端浏览器或者其他程序与Web服务器之间的应用层通信协议.HTTP协议建立在TCP/IP协议,也就是说,是一种可靠的传输协议,意味着两台设备在传输之前必须先建立可靠连接(握手),由客户端发起到服务器端的指定端口(默认为80)HTTP请求,并

Web开发中 前端路由 实现的几种方式和适用场景

浅析Web开发中前端路由实现的几种方式 主题 Web开发 故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因- 叙事体故事讲完,

快速使用node.js进行web开发

首先关于node.js的学习,这里推荐一本比较好的教程,nodejs web开发指南,该书通俗易懂地将node.js语言特性讲解完之后,又从一个项目角度带领读者使用node.js学习web开发.相信这是一个比较好的学习模式和过程.由于这本书是2012年出的,书中的一个web教学项目是开发一个微博.从2012到现在,node.js及其生态环境发生了很大改变,所以关于该书的学习如果照着书本显然是过于陈旧的.到目前为止,node.js的web开发框架已经升级到了Express4.12.1,对于Mong