关于CSSHACK
时间：2023-04-05 23:40:36
HTML5
关于CSSHACK可以参考这个网站http://browserhacks.com/。Internet上的许多资料经常使用!important作为hack方法。其实，这是一种误解。!important经常被我们用来改变样式，而不是为了兼容hack。造成这种误解的原因是IE6在某些情况下并没有主动识别!important，以至于经常被误认为是hack来识别IE6。不过大家要注意，IE6只是在某些情况下不识别（在ie6下，同一个style属性定义在同一个花括号里，如果其中一个加上important，important标签会被忽略，例如:{background:red!important;background:green;}，ie6下解释为背景色绿色，其他浏览器解释为背景色红色；如果在不同的花括号中定义了相同的样式，其中一个加上important,而important会正常发挥作用,例如:div{background:red!important},div{background:green},此时所有浏览器统一将其解释为背景色红色。)示例说明：Hack应用场景(1)适用范围：IE:6.0,IE7.0,IE8。0和0相容的例子：在这个例子中，我们使用渐进式识别的方法，从整体中逐渐排除部分。首先，巧妙地使用“9”标记将IE浏览器与所有情况区分开来。然后，再次使用“+”将IE8与IE7、IE6分开。这时候我们的IE8已经独立认可了。示例代码：.bb{height:32px;background-color:#f1ee18;/*全部识别*/.background-color:#00deff\9;/*IE6,7,8识别*/+background-color:#a200ff;/*IE6,7识别*/_background-color:#1e0bd1;/*IE6识别*/}/*一个类为bb的div标签用于显示*/
Hack应用场景（二）适用范围：IE：6.0、IE7.0、IE8.0、Firefox兼容示例说明：可以很容易看出这是一个增强版Scenario(1)的版本，适用范围更广的环境。其实在场景（1）中，Firefox已经和IE浏览器区分开来了。我们现在需要做的是再次从其他浏览器中识别出Firefox。仔细看代码，你会发现浏览器识别其实很简单。Firefox如何识别它？顺便说一句，伪分类在IE中并没有得到广泛的支持，所以伪分类是一个很好的方法。(.yourClass,x:-moz-any-link,x:default)注意这个区分伪类是IE7经常识别的，所以最好单独识别IE7，此方法对ff3.6无效。您可以使用@-moz-documenturl-prefix(){}示例代码来区分firefox：.bb{height:32px;background-color:#f1ee18;/*全部识别*/background-color:#00deff\9;/*IE6,7,8识别*/+background-color:#a200ff;/*IE6,7识别*/_background-color:#1e0bd1;/*IE6识别*/}.bb,x:-moz-any-link,x:default{background-color:#00ff00;}/*IE7firefox3.5及以下识别*/@-moz-documenturl-prefix(){.bb{background-color:#00ff00;}}/*只能被firefox识别*/*+html.bb{background-color:#a200ff;}/*只能被IE7识别*//*一个显示类为bb的div标签*/
Hack应用场景（三）适用范围：兼容IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)示例说明：我们现在将再次加强我们的CSS，使其能够识别Safari(Chrome)浏览器。这个是根据他们的内核webkit来识别的，用法是@mediascreenand(-webkit-min-device-pixel-ratio:0)示例代码：.bb{height:32px;background-color:#f1ee18;/*全部识别*/background-color:#00deff\9;/*IE6,7,8识别*/+background-color:#a200ff;/*IE6,7识别*/_background-color:#1e0bd1;/*IE6识别*/}@mediascreenand(-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{}/*safari(Chrome)有效*/.bb,x:-moz-any-link,x:default{background-color:#00ff00;}/*IE7firefox3.5及以下识别*/@-moz-documenturl-prefix(){.bb{background-color:#00ff00;}}/*只能被firefox识别*/*+html.bb{background-color:#a200ff;}/*只能被IE7识别*//*类为bb的div标签用于显示*/
Hack应用场景（四）适用范围：IE：6.0+，FireFox：2.0+，Opera10.0+，Sarari3.0+，Chrome完全兼容示例说明：示例的具体代码已经在下面列出示例代码，具体效果为页面顶部的效果，可以通过不同的浏览器查看效果。这次我们基本上把所有主流浏览器都兼容了，来看看代码吧。Opera的识别部分是因为“0”标记，只有IE8和Opera可以识别，而特殊标记往往创造了我们更广泛的黑客手段。下面例子中的代码比较完整，大家可以选择参考。示例代码：
