CSS hack（欢迎补充）

摘要：区分更详细的浏览器专属。这几种前缀如下用法这样就能在同一个文件中来确定同一页面在不同浏览器表现出自己想要的效果。

**CSS hack定义：

  
由于不同的浏览器，比如IE6,IE7,IE8,Mozilla,FireFox,Chrome，Opera和Safari等浏览器对CSS的解析认识不一样

1.IE条件注释法**

2.选择符前缀法

"*html"前缀最对IE6有效
"*+html"前缀只对IE7有效

3.样式属性前缀法

"_"只在IE6下生效
"_*"在IE6和IE7生效

各浏览器CSS hack兼容表：

             IE6    IE7     IE8    IE9    FireFox   Chrome   safari   opera
“!important”         Y                       Y        Y
“_”           Y
“*”           Y      Y
"+”                  Y
“/**/”               Y       Y      Y        Y        Y        Y        Y
“/***/”             Y       Y
“9”                              Y
"9"          Y      Y       Y      Y
“:root”                             Y        Y        Y
“nth-of-type(1)”                             Y        Y                 Y
“[;属性：属性值;];”                                     Y

3.CSS内部hack
CSS内部hack包括："*"、"_"、"+"、""、"9"、"9"、"!important"、"[;属性:属性值;];"、"/**/"、"/***/"等。
用法：

  
IE6:_属性名:属性值;如：_color:red;

          IE6、7:*属性名:属性值;如：*color:red;

          IE7:+属性名:属性值;如：+color:red;

          IE7、8:属性名/***/:属性值9;如：color/***/:red9;

          IE8、9:属性名:属性值;如：color:red;

          IE9:属性名:属性值9;如：color:red9;

          All IE:属性名:属性值9;如：color:red9;

          IE7、FireFox、Chrome:属性名:属性值 !important;如：color:red !important;

          Chrome、safari:[;属性名:属性值;];;如：[;color:red;];,方括号内外的三个“；”不能去掉;

          except IE6:属性名://属性值;如：color://red;

          all browser:属性名:属性值，如：color:red;

4.选择器hack
用法：
IE6:html 选择符{属性名：属性值；}，如：html p{font-size:30px;}

    IE7:*+html 选择符{属性名：属性值；}，如：*+html p{font-size:30px;}

    IE7:html* 选择符{属性名：属性值；}，如：html* p{font-size:30px;}

    IE7:*:first-child+html 选择符{属性名：属性值；}，如：*:first-child+html p{font-size:30px;}

    IE8、FF、Chrome:选择符{属性名：属性值/},如：p{font-size:30px;/}

    IE8+和非IE:选择符:lang(zh-cn){属性名:属性值;}，如：p:lang(zh-cn){font-size:30px;}

    IE9+和非IE：选择符:nth-child(1){属性名:属性值;},如：p:nth-child(1){font-size:30px;}

    IE9::root 选择符{属性名：属性值9；}，如：:root p{font-size:30px9;}

    FireFox only. 1+:选择符, x:-moz-any-link{属性名：属性值}，如：p,x:-moz-any-link{font-size:30px;}

    FireFox 3.0+:选择符,x:-moz-any-link,x:default{属性名：属性值；}，如：p,x:-moz-any-link,x:default{font-size:30px;}

    FireFox:@moz-document url-prefix(){选择符{属性名：属性值；}}，如：
        @-moz-document url-prefix(){body{background-color:pink;}}

    IE 9/10, FireFox 3.5+, Opera:@media screen and (min-resolution: +72dpi){选择符{属性名：属性值；}},如：
        @media screen and (min-resolution:+72dpi){p{font-size:30px;}}

    Chrome、Safari:@media screen and (-webkit-min-device-pixel-ratio:0){选择符{属性名：属性值；}}，如：
        @media screen and (-webkit-min-device-pixel-ratio:0){body{background-color:yellow;}}

    Chrome、Safari:选择符{(-bracket-:hack;color:red;);},如：p{(-bracket-:hack;color:red;);},其中的圆括号可以换成方括号

    Safari 2 - 3.1:html[xmlns*=""]:root 选择符{属性名：属性值；}，如:html[xmlns*=""]:root p{font-size:30px;}

    Safari 2-3:html[xmlns*=""] body:last-child 选择符{属性名：属性值；}，如：html[xmlns*=""] body:last-child p{font-size：30px;}

    Safari 2 - 3.1, Opera 9.25:*|html[xmlns*=""] 选择符{属性名：属性值；},如：*|html[xmlns*=""] p{font-size:30px;}

    safari 3+, chrome 1+, opera9+, ff 3.5+:body:nth-of-type(1) 选择符{属性名：属性值；}，如：body:nth-of-type(1) p{font-size:30px;}

    safari 3+, chrome 1+, opera9+, ff 3.5+:body:first-of-type 选择符{属性名：属性值；}，如：body:first-of-type p{font-size:30px;}

    Opera 9.27 and below, safari 2:html:first-child 选择符{属性名：属性值；}，如：html:first-child p{font-size:30px;}

    Opera:@media all and (min-width:0){选择符{属性名：属性值；}}，如果不加,ff、chrome、safari也都认识。如：
        @media all and (min-width:0){body{background-color:gray;}}

    Opera:@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0){选择符{属性名：属性值；}}，如：
        @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0){body{background-color:red；}}

    IE9、FireFox、Chrome、Safari、Opera：@media all and (min-width:0){选择符{属性名：属性值；}},如：
        @media all and (min-width:0){body{background-color:red;}}

    IE9、FireFox、Chrome、Safari、Opera: :root *> 选择符{属性名：属性值；},如：:root *> p{font-size:30px;}

    IE8、IE9、FireFox、Chrome、Safari、Opera：html>/**/body 选择符{属性名：属性值；},如：
        html>/**/body p{background-color:red;}

    IE7、IE8、IE9、FireFox、Chrome、Safari、Opera：html>body 选择符{属性名：属性值；},如：
        html>body p{background-color:red;}

    IE:@media screen{选择符{属性名：属性值}}，如：@media screen{p{font-size:30px;}}

    iPhone：@media screen and (max-device-width:480px){选择符{属性名：属性值；}},如：
        @media screen and (max-device-width:480px){body{background-color：red；}}

5.IE条件注释
A.简介
IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。
条件注释只能用于IE5以上。如果你安装了多个IE，条件注释将会以最高版本的IE为标准。
条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
B.属性
gt : greater than，选择条件版本以上版本，不包含条件版本
lt : less than，选择条件版本以下版本，不包含条件版本
gte : greater than or equal，选择条件版本以上版本，包含条件版本
lte : less than or equal，选择条件版本以下版本，包含条件版本
! : 选择条件版本以外所有版本，无论高低
C.使用方法
注意把代码中的<>换成英文中相应的大于或小于号






下面的代码是在非IE浏览器下运行的条件注释
您使用不是 Internet Explorer
您正在使用Internet Explorer version 6或者 一个非IE 浏览器
D.例子

            
        

        
            

                嘿嘿，小子竟然也用FireFox，蓝色文字。
                
                
                
            
        
    
    在不同的版本的IE浏览器中，标签中的文字表现不同。

6.FF和IE
（1）DOCTYPE 影响 CSS 处理;
HTML 4.01 Transitional:
HTML 4.01 Frameset:
XHTML 1.0 Strict:
XHTML 1.0 Transitional:
XHTML 1.0 Frameset:
XHTML 1.1:
（2）FF: div 设置 margin为auto时居中, IE 不行;如果想用使整个页面要居中，建议不要套在一个DIV里，可以拆出多个div并在每个拆出的div里定义margin: auto；
（3）FF: 设置 padding 后,div会增加height和width,IE各个版本的浏览器中也有类似的现象,可用 !important 为 FF 特别设置样式；
（4）div 的垂直居中问题: vertical-align:middle; line-height和height值相同才会垂直居中,缺点是要控制内容不要换行；
（5）cursor: pointer可以同时在IE、FF中显示游标手指状， hand仅IE可以；
（6）FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显
示错位, 若不设 height, 可以在 menubar 中插入一个空格；
（7）ul标签在FF中默认是有list-style和padding，所以最好事先声明, 以避免不必要的麻烦；而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题；
（8）作为外部wrapper的div不要定死高度,最好还加上overflow:hidden，以达到高度自适应;
（9）左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距，
CSS样式：
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
HTML代码：

（10）兼容IE7，不大量修改现有代码又能在IE8中正常使用，微软声称，添加就行。

7.注意事项
（1）float的div一定要闭合；
例如：(其中floatA、floatB的属性已经设置为float:left;)

    

    

    

        这里的NOTfloatC并不希望继续平移，而是希望往下排。这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float
    标签闭合。在
和
之间加上
，这个div一定要注意
    声明位置，必须与两个具有float属性的div同级而且之间不能存在嵌套关系，否则会产生异常。
        并且将clear这种样式定义为为如下即可：
            .clear{clear:both;}
        此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
        当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性用zoom:1;可以做到，这样就达到了兼容。
        例如某一个wrapper如下定义：
            .colwrapper{overflow:hidden;zoom:1;margin:5px auto;}
（2）margin加倍的问题
    设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
    例如：

        相应的css为:
        #imfloat{
            float:left;
            margin:5px;/*IE下理解为10px*/
            display:inline;/*IE下再理解为5px*/}
（3）关于容器的包涵关系
        很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要
    用Photoshop或者Firework量取像素级的精度。
（4）关于高度的问题
        如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，如果是静态的内容，高度最好定好，似乎有时候不会自动往下撑开.
    高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding 时。
    例如：
        CSS：
            #box {background-color:#eee;}
            #box p{margin-top: 20px;margin-bottom: 20px; text-align:center;}
        HTML：
            

                
p对象中的内容
            
        解决方法：在p对象上下各加2个空的div对象，CSS代码为{height:0px;overflow:hidden;}或者为div加上border属性。
（5）属性选择器(这个不能算是兼容,是隐藏css的一个bug)：p[id]{}，div[id]{}
        这个对于IE6.0及以下的版本都隐藏,FF和OPera作用；属性选择器和子选择器是有区别的,子选择器的范围从形式来说不如属性选择器的范围大,
    如p[id]中,所有p标签中有id的都是同样式的.
（6）IE捉迷藏的问题
        当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实
    在页面。
        解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽，页面结构尽量简单。
（7）BOX解释不一致
        div{width:300px;margin:0 10px 0 10px;}
    IE5下：div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px；
    IE6和其他浏览器：宽度是以300px+10px(右填充)+10px(左填充)=320px来计算的。
        可以做如下修改：
            div{width:300px !important;width /**/:340px;margin:0 10px 0 10px}
        这样在各个浏览器中，这个div的宽度都是320px；
    在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
        div{margin:30px !important;margin:28px;}注意这两个margin的顺序一定不能写反，！important这个属性IE不能识别，但别的浏览器可以
    识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不能写margin:XXpx! important。

8.以下两种方法几乎能解决现今所有HACK
（1）.!important，能区分FF和IE；
（2）.+html 与 *html是IE特有的标签,firefox暂不支持.而+html又为IE7特有标签.

当样式写在一起时，顺序一般是firefox、IE8、IE7、IE6，各个浏览器会根据它自己的情况优先执行它所支持的css，而在页面中呈现相应的效果。
注意:+html对IE7的HACK必须保证HTML顶部有如下声明：

9.浏览器专属css hack

我来自 Opera 7.2 - 9.5

    
我是神奇的 Safari
    
我来自 FireFox
    
我是你爷爷 FireFox 1 - 2 
    
我是囧 IE 7
    
我是脑瘸 IE 6
（1）使用IE CSS条件注释区分IE浏览器
    
    
（2）使用CSS解析器Hacks区分IE
    虽说IE条件注释十分简单好用，但是如果你想把全部的CSS放到一个文件里的话，那么你不得不使用别的方法。注意这里的IE7 Hack将只对IE7有效，
    因为IE6根本不知道>选择符。同时你也得注意>选择符对于其他浏览器同样是无效的。
    /*IE7*/：html > body #ie7{*display: block;}
    /*IE6*/：body #ie6{_display: block;}
（3）CSS Hack区分FireFox
    第一个使用了 body:empty来区分FireFox1和2 。
    第二个 hack使用了全部FireFox浏览器的专有扩展-moz。-moz只对FireFox有效，使用这个Hack大可不必担心其他浏览器的影响。
    /*FireFox1-2*/：body:empty #firefox12{display: block;}
    /*FireFox*/：@-moz-document url-prefix(){#firefox{display: block;}}
（4）CSS Hack区分Safari
    Safari的CSS hack与FireFox的hack看起来很像，使用的是 Safari浏览器的专有扩展-webkit且只对Safari浏览器有效。
    /*Safari*/
    @media screen and (-webkit-min-device-pixel-ratio:0)
    {#safari { display: block; }}
（5）CSS Hack区分Opera
    /* Opera */
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
    {head~body #opera { display: block; }}
更详细的浏览器专属css hack。

10.其他
(1)min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确，但IE不认得min-这个定义，实际上它
把正常的width和height当作有min的情况来使。如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE
下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{width:80px;height:35px;}
html>body #box{width:auto;height:auto;min-width:80px;min-height:35px;}
(2)在CSS样式前加前缀来区分不同浏览器
在一些现有的css样式前加上前缀，可以区分出不同的浏览器。这几种前缀如下：
-weikit:/Chrome Safari 3.1+/
-moz:/FireFox 3.5+/
-ms:/IE9/
-O:/Opera 10.50–12.00/
用法：

这样就能在同一个css文件中来确定同一页面在不同浏览器表现出自己想要的效果。
注意：有些浏览器中必须先定义样式，之后才能加前缀，如FF；而有些不用定义样式就可以，如Chrome。但浏览器中并不是所有的样式都可以这样做，有些样式是不支持的。
就像上面的例子，如果把box-shadow:10px 10px 10px 10px #ffffff;这一句注释掉，在Chrome中没有关系，但在FF中，特殊的阴影效果就显示不出来了。