常見CSS_Hack解決方法.doc

CSS hack for IE6/IE7/IE8/Firefox/Chrome/Safari每次調(diào)css最令人頭痛的就是瀏覽器校正問題，因?yàn)槊總€(gè)瀏覽器對(duì)css的解釋都不太一樣，firefox本身算是比較照規(guī)矩來，處理上比較簡(jiǎn)單，但是遇到微軟的ie系列頭就大了，雖然都是ie，但是ie6、ie7、ie8各版本對(duì)css的解釋又不一樣，就算你本身已經(jīng)在ie6調(diào)整好，但是在ie7看起來又是不一樣，這時(shí)我們就得來對(duì)各個(gè)瀏覽器設(shè)定不同的數(shù)值來解決版面移位的問題。網(wǎng)路上有非常多關(guān)于css hack的教學(xué)文章，當(dāng)然處理方法也有很多種，接下來要跟大家說明的是屬于比較簡(jiǎn)單的方法，但是以下的校正確無法通過w3c檢測(cè)，雖然無法通過檢測(cè)，但是針對(duì)各個(gè)瀏覽器校正確是有效的喔！目前瀏覽器大宗還是屬于ie6的天下，這原因主要是因?yàn)閤p本身內(nèi)建ie6，而且很多使用者很喜歡重灌xp，因此ie6仍占走了大半的瀏覽器天下，不過隨著windows7的出現(xiàn)，倒是有非常大的機(jī)會(huì)解決過氣的ie6，因?yàn)閣indows7本身是內(nèi)建ie8，微軟的ie8對(duì)css的解釋已經(jīng)越來越標(biāo)準(zhǔn)，當(dāng)然標(biāo)準(zhǔn)程度仍是不及firefox。另外，如果要處理ie各版本瀏覽器的相容性問題，那一定要有各版本的ie瀏覽器可以瀏覽，但是微軟作業(yè)系統(tǒng)內(nèi)并沒有讓多版本的ie共存，為了讓自己電腦內(nèi)存在多種版本的ie瀏覽器，那就趕快下載ietester來使用吧！另外，也別忘記下載firefox來修正網(wǎng)頁css喔！我是分隔線區(qū)別ie和firefox【辨識(shí)符號(hào)】：9【范例練習(xí)】：#tip background:blue; /*firefox 背景變藍(lán)色*/background:red 9; /*ie6、ie7、ie8背景變紅色*/【說明】：因?yàn)閕e瀏覽器看得懂9，但是非ie的瀏覽器一律看不懂，因此就可以用這個(gè)語法來區(qū)分ie和firefox(非ie瀏覽器，像是opera、google chrome、safari等)，因此以上css范例中，非ie瀏覽器是顯示藍(lán)色背景，ie系列瀏覽器是顯示紅色背景。我是分隔線區(qū)別ie6、ie7、ie8、firefox【辨識(shí)符號(hào)】：9、*、_【范例練習(xí)】：#tip background:blue; /*firefox 背景變藍(lán)色*/background:red 9; /*ie8 背景變紅色*/*background:black; /*ie7 背景變黑色*/_background:orange; /*ie6 背景變橘色*/【說明】：因?yàn)閕e系列瀏覽器可讀9，而ie6和ie7可讀*(米字號(hào))，另外ie6可辨識(shí)_(底線)，因此可以依照順序?qū)懴聛?，就?huì)讓瀏覽器正確的讀取到自己看得懂得css語法，所以就可以有效區(qū)分ie各版本和非ie瀏覽器(像是firefox、opera、google chrome、safari等)。我是分隔線區(qū)別ie6、ie7、firefox (方法 1)【辨識(shí)符號(hào)】：*、_【范例練習(xí)】：#tip background:blue; /*firefox背景變藍(lán)色*/*background:black; /*ie7 背景變黑色*/_background:orange; /*ie6 背景變橘色*/【說明】：ie7和ie6可讀*(米字號(hào))，ie6又可以讀_(底線)，但是ie7卻無法讀取_，至于firefox(非ie瀏覽器)則完全無法辨識(shí)*和_，因此就可以透過這樣的差異性來區(qū)分ie6、ie7、firefox，我是分隔線區(qū)別ie6、ie7、firefox (方法 2)【辨識(shí)符號(hào)】：*、!important【范例練習(xí)】：#tip background:blue; /*firefox 背景變藍(lán)色*/*background:green !important; /*ie7 背景變綠色*/*background:orange; /*ie6 背景變橘色*/【說明】：ie7可以辨識(shí)*和!important，但是ie6只可以辨識(shí)*，卻無法辨識(shí)!important，至于firefox可以讀取!important但不能辨識(shí)*因此可以透過這樣的差異來有效區(qū)隔ie6、ie7、firefox。區(qū)別ie7、firefox【辨識(shí)符號(hào)】：*、!important【范例練習(xí)】：#tip background:blue; /*firefox 背景變藍(lán)色*/*background:green !important; /*ie7 背景變綠色*/【說明】：因?yàn)閒irefox可以辨識(shí)!important但卻無法辨識(shí)*，而ie7則可以同時(shí)看懂*、!important，因此可以兩個(gè)辨識(shí)符號(hào)來區(qū)隔ie7和firefox。我是分隔線區(qū)別ie6、ie7 (方法 1)【辨識(shí)符號(hào)】：*、_【范例練習(xí)】：#tip *background:black; /*ie7 背景變黑色*/_background:orange; /*ie6 背景變橘色*/【說明】：ie7和ie6都可以辨識(shí)*(米字號(hào))，但ie6可以辨識(shí)_(底線)，ie7卻無法辨識(shí)，透過ie7無法讀取_的特性就能輕松區(qū)隔ie6和ie7之間的差異。區(qū)別ie6、ie7 (方法 2)【辨識(shí)符號(hào)】：!important【范例練習(xí)】：#tip background:black !important; /*ie7 背景變黑色*/background:orange; /*ie6 背景變橘色*/【說明】：因?yàn)閕e7可讀取!important;但ie6卻不行，而css的讀取步驟是從上到下，因此ie6讀取時(shí)因無法辨識(shí)!important而直接跳到下一行讀取css，所以背景色會(huì)呈現(xiàn)橘色。我是分隔線區(qū)別ie6、firefox【辨識(shí)符號(hào)】：_【范例練習(xí)】：#tip background:black; /*firefox 背景變黑色*/_background:orange; /*ie6 背景變橘色*/【說明】：因?yàn)閕e6可以辨識(shí)_(底線)，但是firefox卻不行，因此可以透過這樣的差異來區(qū)隔firefox和ie6，有效達(dá)成css hack。我是分隔線關(guān)于ie6、ie7、ie8、firefox之間的css hack大概是以上那樣，如果有疏漏或是有錯(cuò)誤還煩請(qǐng)大家指證一下啰！這些css hack是我目前看過比較簡(jiǎn)單的處理方式，當(dāng)然如果你不會(huì)很在意css是否通過w3c的驗(yàn)證，你只會(huì)在意每個(gè)用戶在不同的瀏覽器下閱讀是否可以正常的話，其實(shí)以上css hack對(duì)你來說是非常好用的，因?yàn)檫@些css hack如果善加利用確實(shí)可以正確的解決瀏覽器相容性問題。以上的css hack參照了以下幾篇文章所整理出來的，感謝以下文章的詳細(xì)說明。瀏覽器兼容問題一直是前段開發(fā)工程師比較頭痛的問題，熟悉了里面的規(guī)則也就變得簡(jiǎn)單了，這里有一份資料可以分享給大家，大家平時(shí)開發(fā)過程中遵循這個(gè)規(guī)律的話，會(huì)變得輕松多了：各瀏覽器CSS hack兼容表：IE6IE7IE8FirefoxChromeSafari!importantYY_Y*YY*+Y9YYY0Ynth-of-type(1)YY代碼示例：#testcolor:red; /* 所有瀏覽器都支持 */color:red !important;/* Firefox、IE7支持 */_color:red; /* IE6支持 */*color:red; /* IE6、IE7支持 */*+color:red; /* IE7支持 */color:red9; /* IE6、IE7、IE8支持 */color:red0; /* IE8支持 */body:nth-of-type(1) pcolor:red; /* Chrome、Safari支持 */整體測(cè)試代碼示例：.testcolor:#000000;color:#0000FF0;color:#00FF00;*color:#FFFF00;_color:#FF0000;其他說明：1、如果你的頁面對(duì)IE7兼容沒有問題，又不想大量修改現(xiàn)有代碼，同時(shí)又能在IE8中正常使用，微軟聲稱，開發(fā)商僅需要在目前兼容IE7的網(wǎng)站上添加一行代碼即可解決問題，此代碼如下：2、body:nth-of-type(1) 如果這樣寫，表示全局查找body，將會(huì)對(duì)應(yīng)第一個(gè)。3、還有其他寫法，比如：*html #test或者 *+html #test4、*+html 對(duì)IE7的hack 必須保證HTML頂部有如下聲明：/TR/html4/loose.dtd5、順序：Firefox、IE8、IE7、IE6依次排列。小知識(shí)：什么是CSS hack？