浏览器兼容--条件样式,选择符前缀,样式属性前缀
2012-12-05 09:20 greenal 阅读(2173) 评论(0) 编辑 收藏 举报原文地址-- http://www.w3cplus.com/create-an-ie-only-stylesheet
然后经过改良,就有下面的总结。
1 调用条件样式的方法
只有IE 生效
<!--[if IE]>
<![endif]-->
在具体使用条件注释语句之前,有几种条件注释属性含义我们必须要理解:
- gt(greate than):选择条件版本以上版本,不包含条件版本本身;
- lt(less than):这个刚好与gt相反,表示的是选择条件版本以下的版本,不包含条件版本自身;
- gte(greate than or equal):选择条件版本以上版本,并包含条件版本自身;
- lte(less than or equal):选择条件版本以下的版本,并包含条件版本自身;
- !:选择条件版本以外所有版本,无论高低。
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>