*学习笔记

    CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的css效果，使用每个人浏览器单独识别的样式代码，控制浏览器的显示样式。

Hack分类：

    1.CSS属性前缀法

            .elem{_background: brown;}

    2.选择器前缀法

            *html .elem{}

    3.IE条件注释法

CSS属性前缀法

    属性前缀法是在css样式属性名前加一些只有特定浏览器才能识别的hack前缀，以达到预期效果。

    前缀标识        兼容浏览器

    _                      IE6

    +、*                 IE6、IE7

    \9                     IE6、7、8、9

    \0                     IE8、9、10、11

        /* IE6 */

        /* .box{width: 100px;height: 100px;background: cadetblue;_background: brown;} */

        /* IE 6 7 */

        /* .box{width: 100px;height: 100px;background: cadetblue;+background: brown;} */

        /* .box{width: 100px;height: 100px;background: cadetblue;*background: brown;} */

        /* IE6 ~ 9 */

        /* .box{width: 100px;height: 100px;background: cadetblue;background: brown\9;} */

        /* IE8~11   */

        /* .box{width: 100px;height: 100px;background: cadetblue;background: brown\0;} */

选择器前缀法

    是针对页面表现不一致或者需要特殊对待的浏览器   

    前缀标识        兼容浏览器

    *html               IE6

    *+html             IE7

    :root                IE9以上现代浏览器

IE条件注释法

    这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式

    前缀标识                                         兼容浏览器

    <!--[if IE]>...<!endif]-->                     10以下所有IE（10以上不具备用注释法）

    <!--[if IE 7]>...<!endif]-->                  IE7

    <!--[if lte IE 7]>...<!endif]-->             IE7以下 (以上 是gte)

    <!--[if ! IE 7]>...<!endif]-->                非 IE7

写法：

      <style>

         .box{width: 100px;height: 100px;background: cadetblue;}

        </style>

      <!--[if IE]>      

            <div class="box"></div>

       <!endif]-->