AI专业者开发社区 1 号成员
  •  0 回帖  •  7 浏览  •  4 个月前
   

CSS Hack和CSS Conditional Comments

如果你的 web 站点或应用程序是供给不同的浏览器用户使用的，那么你可能就需要使用到 CSS Hack 和 CSS Conditional Comments，本质上 CSS Conditional Comments 是 CSS Hack 的一种。如果你的 web 站点 CSS 不是特别复杂，用 CSS Hack 就能够解决浏览器 CSS 兼容性问题，但是如果你的站点对用户体验要求比较高或者设计非常绚丽，用 CSS Conditional Comments(CSS 条件注释) 将是你更好的选择。简单的来说，CSS Hack 是通过一些特殊的字符来区分 IE6/7/8 以及 Firefox 的，CSS Conditional Comments 是给不同的浏览器加载不同的 CSS 文件（当然，这也可以用 js 来做）。

一、CSS Hack

CSS Hack 是通过一些特殊的字符来区别 IE 6, IE 7, IE 8 和 Firefox 的，浏览器对于不能识别的字符，将会直接过滤掉，有很多字符能够用于 CSS Hack，在这里有一个非常详细的列表，下面我只列出了一些比较常用的 Hack 字符。

 

IE6

IE7

IE8

FireFox

_

√

×

×

×

*

√

√

×

×

*+ html

×

√

×

×

!important

×

√

√

√

\9

√

√

√

×

@import ‘style.css’

@import “style.css”

@import url(style.css)

@import url(‘style.css’)

@import url(“style.css”)

 

 

√

 

 

√

 

 

√

 

 

√

 

1. _    *    \9    !important

区别 Firefox 和 IE 6

 

?
1
2
3
4
5
/*区别Firefox和IE 6*/
body{
    background-color: red;      /*  Firefox */
    *background-color: yellow;  /*  IE6/7   */
}

 





区别 Firefox 和 IE 7




?
1
2
3
4
5
/*区别Firefox 和 IE 7*/
    body{
        background: orange;
        *background: green;
    }






区别 IE 7 和 IE 6


 


?
1
2
3
4
5
6
    /*区别IE 7 和 IE 6*/
/*ie7显示绿色，ie6显示蓝色*/
body{
    background: green !important;
    *background: blue;
}


 


 


区别 IE 和 Firefox




?
1
2
3
4
5
/*区别IE和Firefox*/
    body{
        background-color: red;      /*  所有浏览器都支持    */
        background-color: yellow\9; /*  IE6/7/8         */
    }






区别 FF/IE8/IE7/IE6




?
1
2
3
4
5
6
7
/*区别IE6/7/8和其他浏览器*/
body{
    background-color: red;      /*  所有浏览器都支持    Firefox显示红色 */
    background-color: green\9;  /*  IE6/7/8         IE8显示绿色     */
    *background-color: yellow;  /*  IE6/7           IE7显示黄色     */
    _background-color: blue;    /*  IE6             IE6显示蓝色     */
}






 


从上述代码中，可以看出，书写 CSS Hack 的顺序为 Firefox<IE8<IE7<IE6，由高标准向低标准走。


2. 关于!important 和 *+html


引用：http://www.neoease.com/css-browser-hack/


优先度: (*+html + !important) > !important > +html




?
1
2
3
4
5
6
7
#bgcolor {
    background:red !important; /* Firefox 等其他浏览器 */
    background:blue; /* IE6 */
}
*+html #bgcolor {
    background:green !important; /* IE7 */
}






二、CSS Conditional Comments


引用：http://lifesinger.org/blog/2009/06/goodbye-to-css-hack/


http://www.yaosansi.com/post/1000.html


条件注释包含一些判断，不过这些判断并不是在 js 中执行，而是在 html 中执行，使用的方法也非常简单。


1. 基本使用方法




?
1
2
3
<!--[if XXX]>
这里是正常的html代码
<![endif]-->






2. 判断 IE 浏览器的基本语法




?
1
2
3
4
<!--[if IE]> / 如果浏览器是IE /
<!--[if IE 6]> / 如果浏览器是IE 6 的版本 /
<!--[if IE 7]> / 如果浏览器是IE 7 的版本 /
<!--[if IE 8]> / 如果浏览器是IE 8 的版本 /






3. 逻辑判断


逻辑判断并不是很常用，但是其中的”!”常常用于判断非 IE 浏览器


lte：就是 Less than or equal to 的简写，也就是小于或等于的意思。
  
lt ：就是 Less than 的简写，也就是小于的意思。
  
gte：就是 Greater than or equal to 的简写，也就是大于或等于的意思。
  
gt ：就是 Greater than 的简写，也就是大于的意思。
  
! ：就是不等于的意思，跟 javascript 里的不等于判断符相同


例句：




?
1
2
3
<!--[if gt IE 6]> / 如果IE版本大于6 /
<!--[if lte IE 7]> / 如果IE版本小于等于7 /
<!--[if !IE]> / 如果浏览器不是IE /






4. 使用




?
1
2
3
4
5
6
7
8
9
10
11
12
<!-- 默认先调用css.css样式表 -->
<link rel="stylesheet" type="text/css" href="css.css" />
 
<!--[if !IE]>
<!-- 非IE下调用1.css样式表 -->
<link rel="stylesheet" type="text/css" href="1.css" />
<![endif]-->
 
<!--[if lt IE 6]>
<!-- 如果IE浏览器版本小于6,调用2.css样式表 -->
<link rel="stylesheet" type="text/css" href="2.css" />
<![endif]-->








?
1
2
3
4
5
6
7
8
9
10
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->>
<!--[if !IE]>--><body><!--<![endif]-->
 
<style type="text/css">
    body.ie6 .test { background-color: blue }
    body.ie7 .test { background-color: red }
    body.ie8 .test { background-color: green }
</style>