CSS Hack

3、CSS Hack 分类

1、CSS类内部Hack

* _ !important等

2、选择器Hack

* html和 *+html等

3、HTML头部引用Hack(if IE)

<!--[if IE 8]>引入CSS<![endif]—>

4、CSS Hack 都有哪些

以下列出一些css hack用到的符号，并不是所有，只是当前用这些就足够了。

CSS Hack	IE6	IE7	IE8	火狐/chrome等
*	√	√	X	X
!important	X	√	√	√
-	√	X	X	X
_	√	X	X	X
+	√	√	X	X
\9	√	√	√	X
\0	X	X	√	X

*注意写法(多数情况下是将hack写在正常CSS属性的下面)

5、区分IE与其他浏览器

.class {
color:#F00;
color:#FFFFFF\9;
}

在IE下文字颜色为白色。
在火狐及chrome下文字颜色为红色。

6、区分IE6与其他浏览器

.class {
background-color:#F00;
_background-color :#FFFFFF;
}
只有IE6能够识别 _

在IE6下背景颜色为白色。
在其他浏览器下背景颜色为红色。

7、支持IE6 & IE7的写法

.class {
background-color:#F00;
+background-color :#FFFFFF;
}

在IE6、IE7下背景颜色为白色。
在其他浏览器下背景颜色为红色

8、选择器Hack的使用

#test
{
width: 300px;
height: 300px;
border: 3px solid #0f0;
}

*html #test
{
background-color: #eee; //IE6下可识别
}

*+html #test
{
background-color: #000; //IE7下可识别
}

9、HTML头部引用Hack(if IE)

工作中用到的
<!--[if lt IE 8]>
<link rel="stylesheet" href="/stylesheets/blueprint/ie.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="/stylesheets/app/ie-hack.css" type="text/css" media="screen, projection">
<![endif]-->

<!--[if IE 6]>
<link rel="stylesheet" href="/stylesheets/app/ie6.css" type="text/css" media="screen, projection">
<![endif]-->

<!--[if IE]> 、<!--[if !IE]> 、<!--[if !IE]>

10、在所有浏览器实现inline-block

在 做导航条的时候，一般会用到ul li结构，大多数时候我是把li设置为浮动(float=left)，让其并排显示在同一行，最后再清除浮动(clear:both)防止影响后面的元 素。

另外一种方法 display:inline-block, ie6和ie7并不完全支持inline-block

li{display:inline-block;} IE6/7下无效
li{display:inline-block; *display:inline;zoom:1;} 开启haslaout