作家
登录

css 条件注释使用指南

作者: 来源:www.28hudong.com 2012-11-19 22:21:43 阅读 我要评论

在CSS 框架和模板出现以后,一些布局的问题可以很容易解决掉,但是显然这不能解决全部问题。这些问题通常可以通过普通的CSS来解决,但是有时候只针对IE显示一些(样式)信息可能会更好。 这是用条件注释是可以实现的。条件注释只支持Windows系统中的IE浏览器。通过这些技巧,我们可以为基于Windows的IE5、6、7、8添加一些特殊的行为。这样做的好处是,HTML和CSS代码可以通过验证。 条件注释的格式 所有可用的条件注释标签是基于相同的原理的。这些条件注释可用于所有的IE浏览器版本。 复制代码代码如下: <!--[if IE]> 如果用户使用IE浏览器,这里的信息会生效。 <![endif]--> 根据情况不同,你需要添加一个浏览器版本号。比如,或许你想让IE5.5使用一个不同的样式表: 复制代码代码如下: <!--[if IE 5.5]> <link rel="stylesheet" href="css/ie5.css" type="text/css" media="screen, projection" /> <![endif]--> 或者只针对IE7: 复制代码代码如下: <!--[if IE 7]> <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /> <![endif]--> 你已经掌握了要领了,是吧? 我们还能用条件注释做什么? 微软同样为这些条件注释添加了一些参数。比如,我们可以使用高于或等于某个版本、低于或等于某个版本。添加这些的确很方便。 比如说,我们要给IE7以及以下的浏览器添加一个不同的样式表,我们可以这样做: 复制代码代码如下: <!--[if lte IE 7]> <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /> <![endif]--> 或者我们想为IE6以上的浏览器创建一个不同的样式表: 复制代码代码如下: <!--[if gte IE 6]> <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /> <![endif]--> 我们可以在我们的条件注释中使用以下参数: 复制代码代码如下: lte – 低于或等于 lt – 低于 gte – 高于或等于 gt – 高于 (IE6)|(IE7) – Internet Explorer 6或 Internet Explorer 7 (IE6)&(IE7) – Internet Explorer 6 和 Internet Explorer 7 更多函数 http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx 使用条件注释让用户升级他们的过时的浏览器 我通常不使用条件注释来修正浏览器bug。我使用他们的方法是告诉人们,他们使用的是一个过时的浏览器。在此类信息里面,我告诉他们,为了安全和更多功能,他们应该升级他们的浏览器。 复制代码代码如下: <!--[if lt IE 7]> <p class="error">警告!您正在使用一款过时的浏览器。这个版本的浏览器功能比较简单而且不够<strong>安全</strong>。请升级您的浏览器到<a href="http://getfirefox.org/" href="http://getfirefox.org/">下载FireFox</a> 或 <a href="http://www.microsoft.com/downloads/en/default.aspx">Internet Explorer 7+.</p> <![endif]--> 通过这种方法,在用户看到这条消息的时候,你可以告诉用户,他们不应该使用这个版本的浏览器,然后他们就可能升级到一个更先进的浏览器。 正如你看到的这样,你可以在你的网站中使用这些条件注释的好处。 前几天前端观察发表了一系列的条件CSS的用法,那些用法是基于这个条件注释的扩展用法。当然这种条件注释的用法比较简单方便,但是使用条件css可以实现更高级的功能。请注意,本文所讲的条件注释可以直接在HTML代码中使用,而条件CSS需要配合程序实现。——神飞

  推荐阅读

  CSS 很酷的透明样式

我们今天这里不重点讨论怎么制作带有透明效果的 .png格式图片,我们来讨论怎么让它在网页中完美的显示出它的透明的魅力。 精灵空间不少地方都有很酷的透明效果。 (下面附上几个截图效果)。 首页 精灵空>>>详细阅读


本文标题:css 条件注释使用指南

地址:http://www.17bianji.com/kaifa2/CSS/16530.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)