代码改变世界

浏览器兼容--条件样式,选择符前缀,样式属性前缀

2012-12-05 09:20  greenal  阅读(2173)  评论(0编辑  收藏  举报
原文地址-- http://www.w3cplus.com/create-an-ie-only-stylesheet
然后经过改良,就有下面的总结。

1 调用条件样式的方法

只有IE 生效
<!--[if IE]>

<![endif]-->

在具体使用条件注释语句之前,有几种条件注释属性含义我们必须要理解:
  1. gt(greate than):选择条件版本以上版本,不包含条件版本本身;
  2. lt(less than):这个刚好与gt相反,表示的是选择条件版本以下的版本,不包含条件版本自身;
  3. gte(greate than or equal):选择条件版本以上版本,并包含条件版本自身;
  4. lte(less than or equal):选择条件版本以下的版本,并包含条件版本自身;
  5. !:选择条件版本以外所有版本,无论高低。
gt:>
lt:<
gte:>=
lte:<=
 
 
1、支持所有IE浏览器
<!--[if IE]>
<link rel="stylesheet" href="test.css"  type="text/css"/>
<![endif]-->
 
2、支持除IE外的所有浏览器
<!--[if !IE]>
<link rel="stylesheet" href="test.css"  type="text/css"/>
<![endif]-->
 
3、仅仅支持IE10
<!--[if IE 10]>
<link rel="stylesheet" type="text/css" href="ie10.css">
<![endif]-->
 
4、支持IE9 以下版本
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]-->
 
 
二、选择符前缀法
<style>
.test{ width:90px;} /*IE 6,IE 7,IE 8*/
*html .test{ width:80px;} /*only for IE 6*/
*+html .test{ width:70px;} /*only for IE 7*/
</style>
 
 
三、样式属性前缀法
<style>
.team{ width:90px; *width:70px; _width:80px;}      /*_ IE 6     * IE 6 和 IE 7*/
</style>