CSS条件注释
由于浏览器版本的不同,对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:
- <div class="menu">
- <ul>
- <li><a class="drop" xhref="../menu/index.html">DEMOS
- <!--[if IE 7]><!–>
- </a>
- <!–<![endif]–>
- <!–IE7时显示</a>标签–>
- <table><tr><td>
- <ul>
- <li><a xhref=”../menu/zero_dollars.html” title=”The zero dollar ads page”>zero dollars advertising page</a></li>
- <li><a xhref=”../menu/embed.html” title=”Wrapping text around images”>wrapping text around images</a></li>
- <li><a xhref=”../menu/form.html” title=”Styling forms”>styled form</a></li>
- <li><a xhref=”../menu/nodots.html” title=”Removing active/focus borders”>active focus</a></li>
- <li><a class=”drop” xhref=”../menu/hover_click.html” title=”Hover/click with no active/focus borders”>hover/click with no borders</li>
- <li class=”upone”><a xhref=”../menu/shadow_boxing.html” title=”Multi-position drop shadow”>shadow boxing</a></li>
- <li><a xhref=”../menu/old_master.html” title=”Image Map for detailed information”>image map for detailed information</a></li>
- <li><a xhref=”../menu/bodies.html” title=”fun with background images”>fun with background images</a></li>
- <li><a xhref=”../menu/fade_scroll.html” title=”fade-out scrolling”>fade scrolling</a></li>
- <li><a xhref=”../menu/em_images.html” title=”em size images compared”>em image sizes compared</a></li>
- </ul>
- </td></tr></table>
- <!–[if lte IE 6]>
- </a>
- <![endif]–>
- </li>
- <!–IE6时显示</a>标签–>
- </ul>
- </div>
CSS
- <link rel="stylesheet" media="all" type="text/css" xhref="final_drop.css" />
- <!--[if lte IE 6]>
- <link rel=”stylesheet” media=”all” type=”text/css” xhref=”final_drop_ie.css” />
- <![endif]–>
采用双样式,给ie和非ie分别定义样式,如果IE时候,在final_drop.css基础上补充一个final_drop_ie.css
先看看非ie下的css是怎样定义的
- .menu ul li ul {
- display: none;
- }
- /* specific to non IE browsers */
- .menu ul li:hover a {
- color:#fff;
- background:#bd8d5e;
- }
- /*定义鼠标滑过样式*/
- .menu ul li:hover ul {
- display:block;
- position:absolute;
- top:3em;
- margin-top:1px;
- left:0;
- width:150px;
- }
在非IE下,看到鼠标滑过时候li包含的ul显示了,因为这些浏览器支持li:hover用法
IE下的css
- .menu ul li a:hover {
- color:#fff;
- background:#bd8d5e;
- }
- /*当鼠标滑过时li包含的ul显示*/
- .menu ul li a:hover ul {
- display:block;
- position:absolute;
- top:3em;
- left:0;
- background:#fff;
- margin-top:0;
- marg\in-top:1px;
- }
继承上面的final_drop.css样式,无鼠标时间时候li包含的ul不显示
因为
<!--[if lte IE 6]>
</a>
<![endif]–>
CSS条件注释的更多相关文章
- css:条件注释判断浏览器
所有的IE可识别 Target ALL VERSIONS of IE <!--[if IE]> <link rel="stylesheet" type=" ...
- [HTML&CSS] 条件注释判断浏览器
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...
- ie10 css hack 条件注释等兼容方式整理
点评:ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来 ...
- 关于CSS中对IE条件注释的问题
一.通用区分方式:IE6.IE7能识别*,标准浏览器(如FF)不能识别*:IE6能识别*,但不能识别 !important:IE7能识别*,也能识别 !important:IE8能识别\0,不能识别* ...
- 浏览器兼容处理(HTML条件注释、CSSHack和JS识别)
前面的话 本文中所有IEx+代表包含x及x以上:IEx-代表包含x及x以下,仅个人习惯.例:IE7+代表IE7.IE8…… 本文中所有例子全部经过测试,欢迎交流. HTML识别 条件注释法(IE10+ ...
- IE条件注释详解
IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句,作用是可以灵活的为不同IE版本浏览器导入不同html元素,如:样式表,html标签等.很显然这种方法的最大好处就在于属于微软官方给出的兼容解决 ...
- IE中的条件注释(转载自网络)
IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句,作用是可以灵活的为不同IE版本浏览器导入不同html元素,如:样式表,html标签等.很显然这种方法的最大好处就在于属于微软官方给出的兼容解决 ...
- 前端备忘录 — IE 的条件注释
CSS hack 由于不同厂商的浏览器,比如 Internet Explorer,Safari,Mozilla Firefox, Chrome 等,或者是同一厂商的浏览器的不同版本,如 IE6 和 I ...
- HTML <!--...--> 注释 、CSS/JS //注释 和 /*.....*/ 注释
<!-- -->是HTML的注释标签,使用<和>是符合HTML标签语法规则的. /* */(注释代码块).//(注释单行)是CSS和JS的注释标签. 两种注释有各自的使用环境, ...
随机推荐
- 怎样使用 Apache ab 以及 OneAPM 进行压力測试?
下一个 release 准备小长假后就要 go-live .全部的測试 case 都 cover 过了.但还未进行过压力測试,有点不放心,刚好过节期间家人都回家去了,假期最终能够抽点时间压測一把. A ...
- Matlab 程序结束后发送短信或者邮件
近期,在服务器上运行matlab程序,由于数据比较多,程序比较复杂,运行时间不固定,而且需要经常改变参数,重复运行几次,所以不清楚程序何时结束,以便于修改参数,继续运行.开始有时间就看看程序是否运行结 ...
- 开源中国(oschina.net)能给我一个交代吗?
一年前准备把goolge上面diocp项目移动到开源中国上面,当时觉得开源中国的的速度还不错,都叫开源中国了,觉得应该稳定. 后来把今年开源mybean项目也放在上面了,还有一些小的项目都放在上面,就 ...
- 使用flume将kafka数据sink到HBase【转】
1. hbase sink介绍 1.1 HbaseSink 1.2 AsyncHbaseSink 2. 配置flume 3. 运行测试flume 4. 使用RegexHbaseEventSeriali ...
- Zookeeper之Zookeeper的Client的分析
1)几个重要概念 ZooKeeper:客户端入口 Watcher:客户端注册的callback ZooKeeper.SendThread: IO线程 ZooKeeper.EventThread: 事件 ...
- 【内核】几个重要的linux内核文件
Preface 当用户编译一个linux内核代码后,会产生几个文件:vmlinz.initrd.img, 以及System.map,如果配置过grub引导管理器程序,会在/boot目录下看到这几个文件 ...
- Maven mvn install 本地jar添加到maven仓库中
最近在使用支付宝.财付通这样的第三方支付,在使用支付宝过程中需要引入官方SDK方便开发,使用以下命令来将本地的jar装载到maven仓库中. 这里有几点需要注意点,我使用Windows10时,使用po ...
- Java类的成员初始化顺序
Java类的成员初始化顺序 2017-06-01 代码: public class InitializeSequence { public static void main(String[] args ...
- 修改urllib2源代码,定制User-Agent,一劳永逸
我经常用到urllib2这个库,基本上每次都要添加 User-Agent 为一个模拟浏览器的值. 突然想到,能不能直接修改源代码,添加 User-Agent 的值. google 到 https:// ...
- 5. 集成学习(Ensemble Learning)GBDT
1. 集成学习(Ensemble Learning)原理 2. 集成学习(Ensemble Learning)Bagging 3. 集成学习(Ensemble Learning)随机森林(Random ...