那些专门写给ie的stylesheet

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

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

<!--[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, 前端