常见CSS_Hack解决方法.doc

CSS hack for IE6/IE7/IE8/Firefox/Chrome/Safari 每次调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、