css hack(css hack的理解汇总)

csshack

由于不同厂商的流览器或某浏览器的不同版别（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支撑、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，咱们为了获得一致的页面效果，就需要针对不同的浏览器或不同版别写特定的CSS款式，咱们把这个针对不同的浏览器/不同版别写相应的CSScode的过程，叫做CSShack!
原理：利用不同浏览器对CSS的支撑和解析成果不一样编写针对特定浏览器款式。常见的hack有
1.特点hack2.选择器hack3.IE条件注释
ie条件注释：适用于[IE5,IE9]常见格式如下：
选择器hack：不同浏览器对选择器的支撑不一样
/*****SelectorHacks******//*IE6andbelow*/*html#uno{color:red}/*IE7*/*:first-child+html#dos{color:red}/*IE7,FF,Saf,Opera*/html>body#tres{color:red}/*IE8,FF,Saf,Opera(EverythingbutIE6,7)*/html>/**/body#cuatro{color:red}/*Opera9.27andbelow,safari2*/html:first-child#cinco{color:red}/*Safari2-3*/html[xmlns*=””]body:last-child#seis{color:red}/*safari3+,chrome1+,opera9+,ff3.5+*/body:nth-of-type(1)#siete{color:red}/*safari3+,chrome1+,opera9+,ff3.5+*/body:first-of-type#ocho{color:red}/*saf3+,chrome1+*/@mediascreenand(-webkit-min-device-pixel-ratio:0){
#diez{color:red}
}/*iPhone/mobilewebkit*/@mediascreenand(max-device-width:480px){
#veintiseis{color:red}
}/*Safari2-3.1*/html[xmlns*=””]:root#trece{color:red}/*Safari2-3.1,Opera9.25*/*|html[xmlns*=””]#catorce{color:red}/*EverythingbutIE6-8*/:root*>#quince{color:red}/*IE7*/*+html#dieciocho{color:red}/*Firefoxonly.1+*/#veinticuatro,x:-moz-any-link{color:red}/*Firefox3.0+*/#veinticinco,x:-moz-any-link,x:default{color:red}
特点hack：不同浏览器解析bug或办法
/*IE6*/#once{_color:blue}/*IE6,IE7*/#doce{*color:blue;/*or#color:blue*/}/*EverythingbutIE6*/#diecisiete{color/**/:blue}/*IE6,IE7,IE8*/#diecinueve{color:blue\9;}/*IE7,IE8*/#veinte{color/*\**/:blue\9;}/*IE6,IE7–actsasan!important*/#veintesiete{color:blue!ie;}/*stringafter!canbeanything*/

csshack的理解汇总

由于不同厂商的流览器或某浏览器的不同版别（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支撑、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展示作用。这时，咱们为了获得统一的页面作用，就需要针对不同的浏览器或不同版别写特定的CSS款式，咱们把这个针对不同的浏览器/不同版别写相应的CSScode的进程，叫做CSShack!
原理：使用不同浏览器对CSS的支撑和解析结果不一样编写针对特定浏览器款式。常见的hack有
1.特点hack2.选择器hack3.IE条件注释
ie条件注释：适用于[IE5,IE9]常见格局如下：
选择器hack：不同浏览器对选择器的支撑不一样
/*****SelectorHacks******/
/*IE6andbelow*/
*html#uno{color:red}
/*IE7*/
*:first-child+html#dos{color:red}
/*IE7,FF,Saf,Opera*/
html>body#tres{color:red}
/*IE8,FF,Saf,Opera(EverythingbutIE6,7)*/
html>/**/body#cuatro{color:red}
/*Opera9.27andbelow,safari2*/
html:first-child#cinco{color:red}
/*Safari2-3*/
html[xmlns*=””]body:last-child#seis{color:red}
/*safari3+,chrome1+,opera9+,ff3.5+*/
body:nth-of-type(1)#siete{color:red}
/*safari3+,chrome1+,opera9+,ff3.5+*/
body:first-of-type#ocho{color:red}
/*saf3+,chrome1+*/
@mediascreenand(-webkit-min-device-pixel-ratio:0){
#diez{color:red}
}
/*iPhone/mobilewebkit*/
@mediascreenand(max-device-width:480px){
#veintiseis{color:red}
}
/*Safari2-3.1*/
html[xmlns*=””]:root#trece{color:red}
/*Safari2-3.1,Opera9.25*/
*|html[xmlns*=””]#catorce{color:red}
/*EverythingbutIE6-8*/
:root*>#quince{color:red}
/*IE7*/
*+html#dieciocho{color:red}
/*Firefoxonly.1+*/
#veinticuatro,x:-moz-any-link{color:red}
/*Firefox3.0+*/
#veinticinco,x:-moz-any-link,x:default{color:red}
特点hack：不同浏览器解析bug或方法
/*IE6*/
#once{_color:blue}
/*IE6,IE7*/
#doce{*color:blue;/*or#color:blue*/}
/*EverythingbutIE6*/
#diecisiete{color/**/:blue}
/*IE6,IE7,IE8*/
#diecinueve{color:blue\9;}
/*IE7,IE8*/
#veinte{color/*\**/:blue\9;}
/*IE6,IE7–actsasan!important*/
#veintesiete{color:blue!ie;}/*stringafter!canbeanything*/