CSS兼容问题之HACK技术

有话先说本文的目的主要是向大家描述一下我们在遇见IE8版本以下以及Firefox兼容的问题。

CSS Hack原理是通过不同浏览器自身所带有的特别标识符以及CSS中优先级的机制来实现不同浏览器里CSS样式兼容性的问题。

针对不同的浏览器写不同的CSS的过程，这就叫CSS hack，也叫写CSS hack，相信您会对一些比较不易解决的兼容问题有一定的兴趣。

注意点

    网上很多资料中常常把!important也作为 个hack 段，其实这是 个误区。!important常常被我们 来更改样式， 不是兼容hack。造成这 个误区的原因是IE6在某些情况下不主动识别!important,以 于常常被 误 做识别IE6的hack。可是， 家注意 下，IE6只是在某些情况下 不识别（ie6下，同 个 括号 对同 个样式属性定义，其中 个加important 则important标记是被忽略的，例{background:red!important; background:green;} ie6下解释为背景 green，其它浏览器解释为背景 red；如果这同 个样式在不同 括号 定义，其中 个加important 则important发挥正常作 ，例div{background:red!important} div{background:green}，这时所有浏览器统一解释为背景色为红色）

CSS HACK区别IE6、IE7、IE8、Firefox兼容问题

1.区别IE和非IE浏览器

例#tip{ background:blue;/ IE背景藍 / background:red\9;/IE6、IE7、IE8背景紅 / }

2.区别IE6,IE7,IE8,FF

区别符号「\9」、「」、「_」

例#tip{ background:blue;/Firefox背景变蓝 / background:red\9;/IE8背景变红色/ background:black;/IE7背景变黑色/ _background:orange;/IE6背景变橘 / }

说明因为IE系列浏览器可读「\9」， IE6和IE7可读「」( 字号)，IE6可辨识「_」(底线)，可以依照 顺序写下来，就会让浏览器正确的读取到 看得懂得CSS语法，所以就可以有效区分IE各版本和 IE浏览器(像是Firefox、Opera、GoogleChrome、Safari等)。

3.区别IE6、IE7、Firefox

区别符号「」、「_」

例#tip{ background:blue;/Firefox背景变蓝 / background:black;/IE7背景变 /_background:orange;/IE6背景变橘 / }

说明IE7和IE6可读「」( 字号)，IE6 可以读「_」(底线)，IE7却 法读取「_」， 于Firefox( IE浏览 器)则完全 法辨识「」和「_」，就可以透过这样的差异性来区分IE6、IE7、Firefox

4.区别IE7、Firefox

区别符号「」、「!important」

例#tip{ background:blue;/Firefox背景变蓝 / background:green!important;/IE7背景变绿 / }

说明因为Firefox可以辨识「!important」但却 法辨识「」， IE7则可以看懂「」、「!important」， 可以两个辨识符号来区隔IE7和Firefox。

5.区别IE6、IE7( 法1)

区别符号「」、「_」

例#tip{ background:black;/IE7背景变 / _background:orange;/IE6背景变橘 / }

说明IE7和IE6都可以辨识「」( 字号)，但IE6可以辨识「_」(底线)，IE7却 法辨识，透过IE7 法读取「_」 的特性就能轻鬆区隔IE6和IE7之间的差异。

6.区别IE6、IE7( 法2)

区别符号「!important」

例#tip{ background:black!important;/IE7背景变 / background:orange;/IE6背景变橘 / }

说明因为IE7可读取「!important;」但IE6却不 ， CSS的读取步骤是从上到下，IE6读取时因 法辨识 「!important」 直接跳到下 读取CSS，所以背景 会呈现橘 。

7.区别IE6、Firefox

区别符号「_」

例#tip{ background:black;/Firefox背景变 / _background:orange;/IE6背景变橘 / }

说明因为IE6可以辨识「_」(底线)，Firefox却不 ，可以透过这样的差异来区隔Firefox和IE6，有效达 成CSShack。

希望这些HACK技术能够帮到需要帮助的开发者，也希望大家不会再IE系列的兼容问题上纠结的太多！