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

1 调用条件样式的方法

只有IE 生效

1
2
<!--[if IE]>
<![endif]-->

在具体使用条件注释语句之前,有几种条件注释属性含义我们必须要理解:
gt(greate than):选择条件版本以上版本,不包含条件版本本身;
lt(less than):这个刚好与gt相反,表示的是选择条件版本以下的版本,不包含条件版本自身;
gte(greate than or equal):选择条件版本以上版本,并包含条件版本自身;
lte(less than or equal):选择条件版本以下的版本,并包含条件版本自身;
!:选择条件版本以外所有版本,无论高低。
1、支持所有IE浏览器

1
2
3
<!--[if IE]>
<link rel="stylesheet" href="test.css"  type="text/css"/>
<![endif]-->

2、支持除IE外的所有浏览器

1
2
3
<!--[if !IE]>
<link rel="stylesheet" href="test.css"  type="text/css"/>
<![endif]-->

3、仅仅支持IE10

1
2
3
<!--[if IE 10]>
<link rel="stylesheet" type="text/css" href="ie10.css">
<![endif]-->

4、支持IE9 以下版本

1
2
3
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]-->

二、选择符前缀法

1
2
3
4
5
<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>

三、样式属性前缀法

1
2
3
<style>
.team{ width:90px; *width:70px; _width:80px;}      /*_ IE 6     * IE 6 和 IE 7*/
</style>

发表一条评论:

电子邮件地址不会被公开。 必填项已用*标注