解决IE6、IE7、IE8、Firefox CSS兼容性的 Hack 写法
2010-08-11 15:28
|
每次调CSS最令人头痛的就是浏览器校正问题，因为每个浏览器对CSS的解释都不太一样，Firefox本身算是比较照规矩来，处理上比较简单，但是遇到微软的IE系列头就大了，虽然都是IE，但是IE6、IE7、IE8各版本对CSS的解释又不一样，就算你本身已经在IE6调整好，但是在IE7看起来又是不一样，这时我们就得来对各个浏览器设定不同的数值来解决版面移位的问题。 网络上有非常多关于CSS Hack的教学文章，当然处理方法也有很多种，接下来要跟大家说明的是属于比较简单的方法，但是以下的校正确无法通过W3C检测，虽然无法通过检测，但是针对各个浏览器校正确是有效的喔！ 目前浏览器大宗还是属于IE6的天下，这原因主要是因为XP本身内建IE6，而且很多使用者很喜欢重灌XP，因此IE6仍占走了大半的浏览器天下，不过随着Windows7的出现，倒是有非常大的机会解决过气的IE6，因为Windows7本身是内建IE8，微软的IE8对CSS的解释已经越来越标准，当然标准程度仍是不及Firefox。 另外，如果要处理IE各版本浏览器的兼容性问题，那一定要有各版本的IE浏览器可以浏览，但是微软操作系统内并没有让多版本的IE共存，为了让自己计算机内存在多种版本的IE浏览器，那就赶快下载IETester来使用吧！另外，也别忘记下载Firefox来修正网页CSS喔！ --------------------------------我是分隔线-------------------------------- 区别IE和Firefox 【辨识符号】：「\9」 【范例练习】： #tip { background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE6、IE7、IE8背景变红色*/ } 【说明】：因为IE浏览器看得懂「\9」，但是非IE的浏览器一律看不懂，因此就可以用这个语法来区分IE和Firefox(非IE浏览器，像是Opera、Google Chrome、Safari等)，因此以上CSS范例中，非IE浏览器是显示蓝色背景，IE系列浏览器是显示红色背景。 --------------------------------我是分隔线-------------------------------- 区别IE6、IE7、IE8、Firefox 【辨识符号】：「\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、Google Chrome、Safari等)。 --------------------------------我是分隔线-------------------------------- 区别IE6、IE7、Firefox (方法 1) 【辨识符号】：「*」、「_」 【范例练习】： #tip { background:blue; /*Firefox背景变蓝色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox， --------------------------------我是分隔线-------------------------------- 区别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。 区别IE7、Firefox 【辨识符号】：「*」、「!important」 【范例练习】： #tip { background:blue; /*Firefox 背景变蓝色*/ *background:green !important; /*IE7 背景变绿色*/ } 【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。 --------------------------------我是分隔线-------------------------------- 区别IE6、IE7 (方法 1) 【辨识符号】：「*」、「_」 【范例练习】： #tip { *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻松区隔IE6和IE7之间的差异。 区别IE6、IE7 (方法 2) 【辨识符号】：「!important」 【范例练习】： #tip { background:black !important; /*IE7 背景变黑色*/ background:orange; /*IE6 背景变橘色*/ } 【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。 --------------------------------我是分隔线-------------------------------- 区别IE6、Firefox 【辨识符号】：「_」 【范例练习】： #tip { background:black; /*Firefox 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。 --------------------------------我是分隔线-------------------------------- 关于IE6、IE7、IE8、Firefox之间的CSS Hack大概是以上那样，如果有疏漏或是有错误还烦请大家指证一下啰！这些CSS Hack是我目前看过比较简单的处理方式，当然如果你不会很在意CSS是否通过W3C的验证，你只会在意每个用户在不同的浏览器下阅读是否可以正常的话，其实以上CSS Hack对你来说是非常好用的，因为这些CSS Hack如果善加利用确实可以正确的解决浏览器兼容性问题。 |