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的注释标签. 两种注释有各自的使用环境, ...
随机推荐
- MySQL与Oracle之间互相拷贝数据的Java程序
因为工作需要,先是需要将一个小型的MySQL数据库中的数据拷贝到Oracle中:近期又有需要将一个中型的Oracle数据库拷贝到MySQL中.曾经找过网上各种转换工具,大多收费的,自己写个吧,还一切可 ...
- node调试的两种方法
刚开始学node.js的时候,一直在用node-inspector,虽然很麻烦,但聊胜于无.后面公司牛人推荐使用node-webkit,就再也没用过node-inspector.再后来node.js版 ...
- 阿里云流计算BLINK
https://help.aliyun.com/product/45029.html?spm=a2c4g.11186623.3.1.sSHCfr https://yq.aliyun.com/tags/ ...
- 正确理解web交互中的cookie与session
cookie存储在客户端的纯文本文件 用户请求服务器脚本 脚本设置cookie内容 并 通过http-response发送cookie内容到客户端并保存在客户端本地 客户端再次发送http请求的时候会 ...
- Linux查看系统cpu个数、核心书、线程数
现在cpu核心数.线程数越来越高,本文将带你了解如何确定一台服务器有多少个cpu.每个cpu有几个核心.每个核心有几个线程. 工具/原料 Linux服务器 方法/步骤 查看物理cpu个数 grep ...
- 每日英语: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 ...
- 每日英语: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 ...
- 关于 android receiver
可以在代码文件中声明一个receiver,也可以在manifest中声明一个,前者中的receiver只有在该activity launch起来以后才会监听其所感兴趣的事件,而如果在androidMa ...
- 【驱动】input子系统全面分析
初识linux输入子系统 linux输入子系统(linux input subsystem)从上到下由三层实现,分别为:输入子系统事件处理层(EventHandler).输入子系统核心层(InputC ...
- 10个非常炫酷的jQuery相册动画赏析
我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...