浏览器兼容--条件样式,选择符前缀,样式属性前缀(转)
浏览器兼容--条件样式,选择符前缀,样式属性前缀
2012-12-05 09:20 by greenal, 1570 阅读, 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>