一、CSSHack的概念由于浏览器厂商不同或浏览器版本不同(如IE、Firefox/Safari/Opera/Chrome等),其支持和CSS的分析是不同的。一样,导致在不同的浏览器环境下页面显示效果不一致。这时候,为了获得统一的页面效果,我们就需要为不同的浏览器或者不同的版本编写特定的CSS样式。我们把针对不同浏览器/不同版本编写相应CSS代码的过程称为CSShack!二、CSSHack的原理是因为不同的浏览器和浏览器版本对CSS的支持和分析结果不同,以及CSS优先级对浏览器显示效果的影响,我们可以针对不同的浏览器场景应用不同的CSS。3、CSSHack的分类3.1CSS属性前缀法(即类内部Hack)(1)IE6可以识别下划线“_”和星号“*”(2)IE7可以识别星号“*”,但不能识别下划线“_”(3)IE6~IE10都能识别"\9"(4)firefox无法识别以上三种。3.2选择器前缀方法(selectorHack)(1)IE6可以识别*html.class{}(2)IE7可以识别*+html.class{}或*:first-child+html.class{}3.3IE条件注释方法(即如果在HTML头部引用IEHack)(1)所有IE(注意:IE10+不再支持条件注释)可以识别(2)IE6及以下版本可以识别这种Hack不仅对CSS有效,而且同样对于写在判断语句中的所有代码都会生效。(3)实际项目中大部分CSSHacks都是针对不同版本IE浏览器的性能差异而引入的。4、CSSHack的书写顺序一般是先定义应用范围广、识别能力强的CSS。5.CSSHackIE条件注释法该方法是IE浏览器专有的hack方法,微软官方推荐的hack方法。5.1只在IE中有效5.2OnlyeffectiveinIE65.3只在IE6+有效5.4不仅在IE8中有效5.5在非IE浏览器中有效六、CSSHack类内部属性前缀法CSS样式属性名称。以达到预期的页面显示效果。6.1IE浏览器各版本CSShack对照表Hack编写实例IE6(S)IE6(Q)IE7(S)IE7(Q)IE8(S)IE8(Q)IE9(S)IE9(Q)IE10(S)IE10(Q)**colorcyanYYYYNYNYNY++colorgreenYYYYNYNYNY--coloryellowYYNNNNNNNN__colorblueYYNYNYNYNN##colorpurpleYYYYNYNYNY0color:red0redNNNNYNYNYNYN90color:red90pinkNNNNNNYNYN!importantcolor:blue!important;color:green;brownNNYNYIENYNY6.2浏览器标准模式(1)《-》IE6生效,专有hack(2)《\9》IE6/IE7/IE8/IE9/IE10全部生效(3)《\0》IE8/IE9/IE10全部生效(4)》\9\0″IE9/IE10生效7.CSSHack选择器前缀法选择器前缀法针对页面性能不一致或需要特殊处理的浏览器。只是在CSS选择器前加了一些特定浏览器只能识别的前缀被hack了。阅读更多
