css hack(css hack的理解汇总)

csshack的理解汇总

1、什么是CSShack?
CSShack是经过在CSS款式中加入一些特别的符号，让不同的浏览器辨认不同的符号（什么样的浏览器辨认什么样的符号是有规范的，CSShack就是让你记住这个规范），以到达使用不同的CSS款式的目的，比方.kwstu{width:300px;_width:200px;}，一般浏览器会先给元素使用width:300px;的款式，紧接着后边还有个_width:200px;由于下划线_width只要IE6能够辨认，所以此款式在IE6中实践设置目标的宽度为200px，后边的把前面的给掩盖了，而其他浏览器不辨认_width不会执行_width:200px;这句款式，所以在其他浏览器中设置目标的宽度就是300px;
以下是引自百度文库的界说
简单地讲，csshack指各版别及各品牌浏览器之间对CSS解释后出现网页内容的差错(比方咱们常说错位)的处理。由于各浏览器的内核不同，所以会造成一些差错就像JS相同，一个JS网页特效，在微软IE6、IE7、IE8浏览器有作用，但可能在火狐（MozillaFirefox）谷歌浏览器无效，这样就叫做JShack，所以咱们关于CSS来说他们来解决各浏览器对CSS解释不同所采取的差异不同浏览器制作不同的CSS款式的设置来解决这些问题就叫作CSSHack。
留意：咱们通常主要考虑的浏览器有IE6、IE7、IE8、谷歌浏览器（chrome）、火狐（MozillaFirefox）即可，至于咱们常用的傲游、QQ的TT浏览器是用你计算机中装的系统自带浏览器的内核，所以只需要兼容以上浏览器即可兼容TT\傲游浏览器。
2、CSShack解决问题
CSShack用来解决有些css特点在不同浏览器中显现的作用不相同的问题，如margin特点在ie6中显现的间隔会比其他浏览器中显现的间隔宽2倍，也就是说margin-left:20px;在ie6中距左边目标的实践显现间隔是40px，而在非ie6中显现的距左边目标的间隔是设置的值20px;所以要想设置一个目标间隔左边目标的间隔在一切浏览器中都显现是20px的宽度的款式应为：.kwstu{margin-left:20px;_margin-left:20px;}。
3、浏览器辨认字符规范对应表
从上图能够分分出以下几种情况：
1.大部分特别字符IE浏览器支撑，其他干流浏览器firefox，chrome，opera，safari不支撑(opera可辨认除外)。
2.\9：一切IE浏览器都支撑
3._和-：仅IE6支撑
4.*：IE6、E7支撑
5.\0：IE8、IE9支撑，opera部分支撑
6.\9\0：IE8部分支撑、IE9支撑
7.\0\9：IE8、IE9支撑
4、各种CSShack情况介绍
1.差异IE和非IE浏览器
#tip{
background:blue;/*非IE布景蓝色由于一切浏览器都能解释*/
background:red\9;/*IE6、IE7、IE8、IE9布景紅色由于\9在IE6.7.8.9中能够辨认，掩盖上面款式IE10跟11应该不辨认，IE11测试确定*/
}
2.差异IE6,IE7,IE8,FF
【差异符号】：“\9”、“*”、“_”
#tip{
background:blue;/*Firefox布景变蓝色一切浏览器都支撑*/
background:red\9;/*IE8布景变赤色IE6、7、8、9支撑掩盖上面款式*/
*background:black;/*IE7布景变黑色IE6、7支撑又一次掩盖上面款式*/
_background:orange;/*IE6布景变橘色紧IE6支撑又一次掩盖上面款式*/
}
【说明】：由于IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，别的IE6可辨识「_」(底线)，因而能够依照次序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就能够有效差异IE各版别和非IE浏览器(像是Firefox、Opera、GoogleChrome、Safari等)。
3.差异IE6、IE7、Firefox(办法1)
【差异符号】：“*”、“_”
#tip{
background:blue;/*Firefox布景变蓝色*/
*background:black;/*IE7布景变黑色*/
_background:orange;/*IE6布景变橘色*/
}
【阐明】：IE7和IE6可读「*」(米字号)，IE6又能够读「_」(底线)，可是IE7却无法读取「_」，至于Firefox(非IE浏览器)则彻底无法辨识「*」和「_」，因而就能够透过这样的差异性来差异IE6、IE7、Firefox
4.差异IE6、IE7、Firefox(办法2)
【差异符号】：“*”、“!important”
#tip{
background:blue;/*Firefox布景变蓝色*/
*background:green!important;/*IE7布景变绿色*/
*background:orange;/*IE6布景变橘色*/
}
【阐明】：IE7能够辨识「*」和「!important」，可是IE6只能够辨识「*」，却无法辨识「!important」，至于Firefox能够读取「!important」但不能辨识「*」因而能够透过这样的差异来有效区隔IE6、IE7、Firefox。
5.差异IE7、Firefox
【差异符号】：“*”、“!important”
#tip{
background:blue;/*Firefox布景变蓝色*/
*background:green!important;/*IE7布景变绿色*/
}
【阐明】：由于Firefox能够辨识「!important」但却无法辨识「*」，而IE7则能够同时看懂「*」、「!important」，因而能够两个辨识符号来区隔IE7和Firefox。
6.差异IE6、IE7(办法1)
【差异符号】：“*”、“_”
#tip{
*background:black;/*IE7布景变黑色*/
_background:orange;/*IE6布景变橘色*/
}
【阐明】：IE7和IE6都能够辨识「*」(米字号)，但IE6能够辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。
7.差异IE6、IE7(办法2)
【差异符号】：“!important”
#tip{
background:black!important;/*IE7布景变黑色*/
background:orange;/*IE6布景变橘色*/
}
【阐明】：由于IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因而IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以布景色会呈现橘色。
8.差异IE6、Firefox
【差异符号】：“_”
#tip{
background:black;/*Firefox布景变黑色*/
_background:orange;/*IE6布景变橘色*/
}
【阐明】：由于IE6能够辨识「_」(底线)，可是Firefox却不行，因而能够透过这样的差异来区隔Firefox和IE6，有效达到CSShack。
5、IE浏览器下hack总结
element{
color：#666\9；//IE8IE9
*color：#999；//IE7
_color:#EBEBEB；//IE6
}
能够看出，使用字符辨认无法差异IE8和IE9，咱们能够从伪类的辨认来差异
element{
color：#666\9；//IE8
*color：#999；//IE7
_color:#EBEBEB；//IE6
}
:rootelement{color：#666\9;}//IE9
【阐明】：“:root”伪类IE系列只要IE9支撑，其他干流浏览器均支撑，使用这一点来差异IE8和IE9。别的考虑到opera部分支撑，彻底支撑:root,所以不使用。
6、其他干流浏览器csshack总结
1.Firefox浏览器：mozilla私有特点
@-moz-documenturl-prefix(){.element{color:#f1f1f1;}}//Firefox
2.Webkit和Opera:
@mediaalland(min-width:0px){.element{color:#777;}}
//Webkit
@mediascreenand(-webkit-min-device-pixel-ratio:0)
{
.element{color:#444;}
}
//Opera
@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){
.element{color:#336699;}
}
7、兼容各大干流浏览器(最新版别)csshack汇总如下（最全的）：
.element{
color:#000;/*w3c规范*/
[;color:#f00;];/*Webkit(chrome和safari)*/
color:#666\9;/*IE8*/
*color:#999;/*IE7*/
_color:#333;/*IE6*/
}
:root.element{color:#0f0\9;}/*IE9*/
@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(
-webkit-min-device-pixel-ratio:0){.element{color:#336699;}}/*opera*/
@-moz-documenturl-prefix(){.element{color:#f1f1f1;}}/*Firefox*/