浏览器兼容之旅第一站:如何在页面中创建IE条件注释

2020-04-27 07:44:40易采站长站整理

调用条件样式的方法
我们调用条件样式方法和<link>标签一样,常常放置在<head>标签中。和前面所见识的普通注释不一样的是,这里需要加上条件判断,具体格式如下所示:


<!–[if IE] >

<![endif]–>

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

条件样式的使用方法
下面我们一起来看针对不同版本如何使用条件样式
1、支持所有IE浏览器


<!–[if IE] >
<link rel=”stylesheet” href=”all-ie-only.css” type=”text/css”/ >
<![endif]–>

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


<!–[if !IE] >
<link rel=”stylesheet” href=”not-ie.css” type=”text/css”/ >
<![endif]–>

上面是除了IE浏览器外所有浏览器都识别这个样式,另外CSS-TRICKS的《How To Create an IE-Only Stylesheet 》一文中提供了另一种写法:


<!–[if !IE] ><!–>
<link rel=”stylesheet” type=”text/css” href=”not-ie.css” / >
<!–<![endif]–>

3、仅仅支持IE10


<!–[if IE 10] >
<link rel=”stylesheet” type=”text/css” href=”ie10.css” >
<![endif]–>

4、仅仅支持IE9


<!–[if IE 9] >
<link rel=”stylesheet” type=”text/css” href=”ie9.css” >
<![endif]–>

5、仅仅支持IE8


<!–[if IE 8] >
<link rel=”stylesheet” type=”text/css” href=”ie8.css” >
<![endif]–>

6、仅仅支持IE7


<!–[if IE 7] >
<link rel=”stylesheet” type=”text/css” href=”ie7.css” >
<![endif]–>

7、仅仅支持IE6


<!–[if IE 6] >
<link rel=”stylesheet” type=”text/css” href=”ie6.css” >
<![endif]–>

8、支持IE10以下版本(IE9以及IE9以下版本)