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

<!--[if XXX]>
这里是正常的html代码
<![endif]–>
这里XXX是一些特定的东东,在此列表几个出来,详细介绍各自的含义:
<!–[if IE]> / 如果浏览器是IE /
<!–[if IE 5]> / 如果浏览器是IE 5 的版本 /
<!–[if IE 6]> / 如果浏览器是IE 6 的版本 /
<!–[if IE 7]> / 如果浏览器是IE 7 的版本 /

上面是几个常用的判断IE浏览器版本的语法,下面再来介绍一下相对比较少用的逻辑判断的参数:
有几个参数:lte,lt,gte,gt及!
各自的详细解释如下:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。

例句:

<!--[if gt IE 5.5]> / 如果IE版本大于5.5 /
<!–[if lte IE 6]> / 如果IE版本小于等于6 /
<!–[if !IE]> / 如果浏览器不是IE /

看到这里相信大家都已经明白了条件注释的用法了,OK,那来举个例子吧:
<!-- 默认先调用css.css样式表 -->
<link rel="stylesheet" type="text/css" xhref="css.css" />
<!--[if !IE]>
<!– 非IE下调用1.css样式表 –>
<link rel=”stylesheet” type=”text/css” xhref=”1.css” />
<![endif]–>
<!–[if lt IE 6]>
<!– 如果IE浏览器版本小于6,调用2.css样式表 –>
<link rel=”stylesheet” type=”text/css” xhref=”2.css” />
<![endif]–>

定义什么浏览器下显示什么内容。
这个dropmenu(下拉菜单)模型来自cssplay,使经过作者多次的研究和反复的测试才做出来的。我想那这个模型来实践一下条件注释的原理。
先看一个最简单的模型
下面是xhtm:

  1. <div class="menu">
  2. <ul>
  3. <li><a class="drop" xhref="../menu/index.html">DEMOS
  4. <!--[if IE 7]><!–>
  5. </a>
  6. <!–<![endif]–>
  7. <!–IE7时显示</a>标签–>
  8. <table><tr><td>
  9. <ul>
  10. <li><a xhref=”../menu/zero_dollars.html” title=”The zero dollar ads page”>zero dollars advertising page</a></li>
  11. <li><a xhref=”../menu/embed.html” title=”Wrapping text around images”>wrapping text around images</a></li>
  12. <li><a xhref=”../menu/form.html” title=”Styling forms”>styled form</a></li>
  13. <li><a xhref=”../menu/nodots.html” title=”Removing active/focus borders”>active focus</a></li>
  14. <li><a class=”drop” xhref=”../menu/hover_click.html” title=”Hover/click with no active/focus borders”>hover/click with no borders</li>
  15. <li class=”upone”><a xhref=”../menu/shadow_boxing.html” title=”Multi-position drop shadow”>shadow boxing</a></li>
  16. <li><a xhref=”../menu/old_master.html” title=”Image Map for detailed information”>image map for detailed information</a></li>
  17. <li><a xhref=”../menu/bodies.html” title=”fun with background images”>fun with background images</a></li>
  18. <li><a xhref=”../menu/fade_scroll.html” title=”fade-out scrolling”>fade scrolling</a></li>
  19. <li><a xhref=”../menu/em_images.html” title=”em size images compared”>em image sizes compared</a></li>
  20. </ul>
  21. </td></tr></table>
  22. <!–[if lte IE 6]>
  23. </a>
  24. <![endif]–>
  25. </li>
  26. <!–IE6时显示</a>标签–>
  27. </ul>
  28. </div>

CSS

  1. <link rel="stylesheet" media="all" type="text/css" xhref="final_drop.css" />
  2. <!--[if lte IE 6]>
  3. <link rel=”stylesheet” media=”all” type=”text/css” xhref=”final_drop_ie.css” />
  4. <![endif]–>

采用双样式,给ie和非ie分别定义样式,如果IE时候,在final_drop.css基础上补充一个final_drop_ie.css
先看看非ie下的css是怎样定义的

  1. .menu ul li ul {
  2. display: none;
  3. }
  4. /* specific to non IE browsers */
  5. .menu ul li:hover a {
  6. color:#fff;
  7. background:#bd8d5e;
  8. }
  9. /*定义鼠标滑过样式*/
  10. .menu ul li:hover ul {
  11. display:block;
  12. position:absolute;
  13. top:3em;
  14. margin-top:1px;
  15. left:0;
  16. width:150px;
  17. }

在非IE下,看到鼠标滑过时候li包含的ul显示了,因为这些浏览器支持li:hover用法
IE下的css

  1. .menu ul li a:hover {
  2. color:#fff;
  3. background:#bd8d5e;
  4. }
  5. /*当鼠标滑过时li包含的ul显示*/
  6. .menu ul li a:hover ul {
  7. display:block;
  8. position:absolute;
  9. top:3em;
  10. left:0;
  11. background:#fff;
  12. margin-top:0;
  13. marg\in-top:1px;
  14. }

继承上面的final_drop.css样式,无鼠标时间时候li包含的ul不显示
因为
<!--[if lte IE 6]>
</a>
<![endif]–>

CSS条件注释的更多相关文章

  1. css:条件注释判断浏览器

    所有的IE可识别 Target ALL VERSIONS of IE <!--[if IE]> <link rel="stylesheet" type=" ...

  2. [HTML&CSS] 条件注释判断浏览器

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...

  3. ie10 css hack 条件注释等兼容方式整理

    点评:ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来 ...

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

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

  5. 浏览器兼容处理(HTML条件注释、CSSHack和JS识别)

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

  6. IE条件注释详解

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

  7. IE中的条件注释(转载自网络)

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

  8. 前端备忘录 — IE 的条件注释

    CSS hack 由于不同厂商的浏览器,比如 Internet Explorer,Safari,Mozilla Firefox, Chrome 等,或者是同一厂商的浏览器的不同版本,如 IE6 和 I ...

  9. HTML <!--...--> 注释 、CSS/JS //注释 和 /*.....*/ 注释

    <!-- -->是HTML的注释标签,使用<和>是符合HTML标签语法规则的. /* */(注释代码块).//(注释单行)是CSS和JS的注释标签. 两种注释有各自的使用环境, ...

随机推荐

  1. MySQL与Oracle之间互相拷贝数据的Java程序

    因为工作需要,先是需要将一个小型的MySQL数据库中的数据拷贝到Oracle中:近期又有需要将一个中型的Oracle数据库拷贝到MySQL中.曾经找过网上各种转换工具,大多收费的,自己写个吧,还一切可 ...

  2. node调试的两种方法

    刚开始学node.js的时候,一直在用node-inspector,虽然很麻烦,但聊胜于无.后面公司牛人推荐使用node-webkit,就再也没用过node-inspector.再后来node.js版 ...

  3. 阿里云流计算BLINK

    https://help.aliyun.com/product/45029.html?spm=a2c4g.11186623.3.1.sSHCfr https://yq.aliyun.com/tags/ ...

  4. 正确理解web交互中的cookie与session

    cookie存储在客户端的纯文本文件 用户请求服务器脚本 脚本设置cookie内容 并 通过http-response发送cookie内容到客户端并保存在客户端本地 客户端再次发送http请求的时候会 ...

  5. Linux查看系统cpu个数、核心书、线程数

    现在cpu核心数.线程数越来越高,本文将带你了解如何确定一台服务器有多少个cpu.每个cpu有几个核心.每个核心有几个线程. 工具/原料 Linux服务器 方法/步骤   查看物理cpu个数 grep ...

  6. 每日英语:Missing at Mobile World Congress: Innovation

    The hottest showcase for new technology at this year's Mobile World Congress wasn't in the event's c ...

  7. 每日英语:How Your Knees Can Predict the Weather

    The Wolff family of Paramus, N.J., was eyeing the gathering clouds and debating whether to cancel a ...

  8. 关于 android receiver

    可以在代码文件中声明一个receiver,也可以在manifest中声明一个,前者中的receiver只有在该activity launch起来以后才会监听其所感兴趣的事件,而如果在androidMa ...

  9. 【驱动】input子系统全面分析

    初识linux输入子系统 linux输入子系统(linux input subsystem)从上到下由三层实现,分别为:输入子系统事件处理层(EventHandler).输入子系统核心层(InputC ...

  10. 10个非常炫酷的jQuery相册动画赏析

    我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...