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

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

2012-12-05 09:20 by greenal, 1570 阅读, 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{ 90px;}               /*IE 6,IE 7,IE 8*/
*html .test{ 80px;}         /*only for IE 6*/
*+html .test{ 70px;}        /*only for IE 7*/
</style>

三、样式属性前缀法

<style>

.team{ 90px; *70px; _80px;}      /*_ IE 6     * IE 6 和 IE 7*/

</style>