通过条件注释hack创建只对IE生效的样式<!--[if IE]>

最新推荐文章于 2024-10-11 17:39:47 发布

HelloStarnger

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量358

点赞数

分类专栏： css html 文章标签： ie stylesheet 浏览器 javascript web开发 css

html 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

css

20 篇文章 0 订阅

订阅专栏

对于从事web开发的人来说，如何解决IE与其他浏览器样式的一致性一直是一件头痛的事情，特别是IE还分出了好几个版本你，目前最新的是IE8,用的最多的还是那个早该淘汰的IE6,同一种写法的css在IE各个版本之间也会出现不同的结果...

对于这种问题有人使用hack来解决，今天要说的就是通过条件注释来选择与浏览器相对的样式表,条件注释不只是对加载css起作用，对于加载javascript同样有效。

例如下面这个，如果使用的是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]-->

针对IE7：

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

针对IE6：

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

针对IE5

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

针对IE6及IE6以下的版本：

<!--[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]-->

针对IE7及IE7以下的版本：

<!--[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]-->

针对IE8及IE8以下的版本：

<!--[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]-->

针对IE6以上版本包含IE6：

<!--[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]-->

针对IE7以上版本包含IE7：

<!--[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]-->

针对IE8以上版本包含IE8：

<!--[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]-->