由于浏览器版本的不同,对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. 怎样使用 Apache ab 以及 OneAPM 进行压力測试?

    下一个 release 准备小长假后就要 go-live .全部的測试 case 都 cover 过了.但还未进行过压力測试,有点不放心,刚好过节期间家人都回家去了,假期最终能够抽点时间压測一把. A ...

  2. Matlab 程序结束后发送短信或者邮件

    近期,在服务器上运行matlab程序,由于数据比较多,程序比较复杂,运行时间不固定,而且需要经常改变参数,重复运行几次,所以不清楚程序何时结束,以便于修改参数,继续运行.开始有时间就看看程序是否运行结 ...

  3. 开源中国(oschina.net)能给我一个交代吗?

    一年前准备把goolge上面diocp项目移动到开源中国上面,当时觉得开源中国的的速度还不错,都叫开源中国了,觉得应该稳定. 后来把今年开源mybean项目也放在上面了,还有一些小的项目都放在上面,就 ...

  4. 使用flume将kafka数据sink到HBase【转】

    1. hbase sink介绍 1.1 HbaseSink 1.2 AsyncHbaseSink 2. 配置flume 3. 运行测试flume 4. 使用RegexHbaseEventSeriali ...

  5. Zookeeper之Zookeeper的Client的分析

    1)几个重要概念 ZooKeeper:客户端入口 Watcher:客户端注册的callback ZooKeeper.SendThread: IO线程 ZooKeeper.EventThread: 事件 ...

  6. 【内核】几个重要的linux内核文件

    Preface 当用户编译一个linux内核代码后,会产生几个文件:vmlinz.initrd.img, 以及System.map,如果配置过grub引导管理器程序,会在/boot目录下看到这几个文件 ...

  7. Maven mvn install 本地jar添加到maven仓库中

    最近在使用支付宝.财付通这样的第三方支付,在使用支付宝过程中需要引入官方SDK方便开发,使用以下命令来将本地的jar装载到maven仓库中. 这里有几点需要注意点,我使用Windows10时,使用po ...

  8. Java类的成员初始化顺序

    Java类的成员初始化顺序 2017-06-01 代码: public class InitializeSequence { public static void main(String[] args ...

  9. 修改urllib2源代码,定制User-Agent,一劳永逸

    我经常用到urllib2这个库,基本上每次都要添加 User-Agent 为一个模拟浏览器的值. 突然想到,能不能直接修改源代码,添加 User-Agent 的值. google 到 https:// ...

  10. 5. 集成学习(Ensemble Learning)GBDT

    1. 集成学习(Ensemble Learning)原理 2. 集成学习(Ensemble Learning)Bagging 3. 集成学习(Ensemble Learning)随机森林(Random ...