前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

前端集合 RSS订阅
Home » 技巧应用,前端集合 » 那些专门写给ie的stylesheet

那些专门写给ie的stylesheet

发布者:前端集合 // 发布时间:2011-05-16 09:11:00 // 分类:技巧应用,前端集合 // 访问: 3,907 次 // 热度:

在很多网站中,我们经常看到如下类似代码:

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

为什么使用这种写法?

1. 在前端开发中,经常会碰到兼容性问题,可以使用if ie来解决这些问题

2. 会使你的主stylesheet更干净,更易于维护

3. 是一个完美的并为微软所支持的解决方案

4. 这种hack方法有效、合理

具体介绍:

所以的ie版本

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

除了ie以外的所有浏览器

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

只支持ie 7

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

ie 6

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

ie 5

<!--[if IE 5]>
        <link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]—>

ie 5.5

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]—>

ie 6 及以下

<!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]—>
或者
<!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]—>

ie 7 及以下

<!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]—>
或者
<!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]—>

ie 8 及以下

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

或者

<!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]—>

ie 6 及以上

<!--[if gt IE 5.5]>
        <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]—>
或者
<!--[if gte IE 6]>
        <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]—>

ie 7 及以上

<!--[if gt IE 6]>
        <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]—>

或者

<!--[if gte IE 7]>
        <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]—>

ie 8 及以上

<!--[if gt IE 7]>
        <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]—>
或者
<!--[if gte IE 8]>
        <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]—>

特别针对ie 6中的兼容性处理:

<!--[if !IE 6]><!—>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="ie.css" />
<!--<![endif]—>
<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="ie.css" />
<![endif]—>
<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="ie6.0.3.css" />
<![endif]—>
Via

Tags: CSS, html, IE-Only Stylesheet, css hack, 前端

Feedsky的服务已经有了很大改善>>  << 3款在线浏览器兼容性测试工具
Top