CSS Hack 学习与总结

最近工作写CSS比较多，写完之后发现问题很多，尤其是浏览器兼容问题，现将学到的和一些总结的写下来。

1、什么是CSS

Cascading Style Sheets(层叠样式表)的简称.

一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).

在标准网页设计中负责网页内容的表现.

例如 background-color: red; 被描述的元素的背景颜色为红色。

2、CSS Hack 是什么

      由于不同的浏览器比如IE6,IE7,火狐等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

      这个针对不同的浏览器写不同的CSS code的过程，就叫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-blockli{display:inline-block;} IE6/7下无效li{display:inline-block; *display:inline;zoom:1;} 开启haslaout

内部PPT文件