特牛的FF/IE6/IE7專用CSS HACK
更新時(shí)間：2008年01月10日 16:29:48 作者：
特牛的FF/IE6/IE7專用CSS HACK
這是一篇關(guān)于CSS HACK的文章，這篇文章中提到的CSS HACK是針對(duì)class、id中屬性的HACK，排列的順序都具有要求。今天要和大家說(shuō)的是針對(duì)class、id所做的CSS HACK。
.test{/*FF*/
height:20px;
background-color:orange;
}
*+html .test{/*IE7*/
height:20px;
background-color:blue;
}
*html .test{/*IE6*/
height:20px;
background-color:black;
}
通過(guò)上面的CSS代碼可以看出FF還是最聽(tīng)話的瀏覽器，在IE6和IE7如果要使用HACK必須要在前面加上夫級(jí)標(biāo)簽html。這里就很好記憶了，IE6加*html，而IE7加*+html，暗示加了一個(gè)版本。通過(guò)對(duì)class、id所做的CSS HACK好處在于不用顧及前后順序，而且便于管理和其他人員接受，還可以通過(guò)這種HACK實(shí)現(xiàn)類似JS瀏覽器版本的控制。缺點(diǎn)嘛可能就是產(chǎn)生大量的代碼吧！好了，大致就先說(shuō)說(shuō)這些。
上面內(nèi)容看完可以點(diǎn)擊下面的效果在不同瀏覽器來(lái)看看效果，其中橙色代表FF，藍(lán)色代表IE7，黑色代表IE6。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
復(fù)制代碼 代碼如下:
.test{/*FF*/
height:20px;
background-color:orange;
}
*+html .test{/*IE7*/
height:20px;
background-color:blue;
}
*html .test{/*IE6*/
height:20px;
background-color:black;
}
通過(guò)上面的CSS代碼可以看出FF還是最聽(tīng)話的瀏覽器，在IE6和IE7如果要使用HACK必須要在前面加上夫級(jí)標(biāo)簽html。這里就很好記憶了，IE6加*html，而IE7加*+html，暗示加了一個(gè)版本。通過(guò)對(duì)class、id所做的CSS HACK好處在于不用顧及前后順序，而且便于管理和其他人員接受，還可以通過(guò)這種HACK實(shí)現(xiàn)類似JS瀏覽器版本的控制。缺點(diǎn)嘛可能就是產(chǎn)生大量的代碼吧！好了，大致就先說(shuō)說(shuō)這些。
上面內(nèi)容看完可以點(diǎn)擊下面的效果在不同瀏覽器來(lái)看看效果，其中橙色代表FF，藍(lán)色代表IE7，黑色代表IE6。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
相關(guān)文章
Firefox返回時(shí)Iframe的顯示Bug的解決方法
一個(gè)頁(yè)面有4個(gè)Iframe來(lái)顯示flash內(nèi)容，其中第二個(gè)iframe的顯示是用Javascript控制的，只有當(dāng)特定的cookie存在時(shí)才出現(xiàn)，否則顯示普通的文本。2008-05-05
研究了一下div+css的高度自適應(yīng)問(wèn)題
研究了一下div+css的高度自適應(yīng)問(wèn)題...2007-08-08
CSS的filter屬性用于給元素添加各種圖形效果,如模糊、顏色偏移等,它支持多種濾鏡函數(shù),如blur()、brightness()、contrast()等,可以單獨(dú)使用,也可以組合使用,以創(chuàng)建更復(fù)雜的效果2024-11-11
web標(biāo)準(zhǔn)常見(jiàn)問(wèn)題集合
web標(biāo)準(zhǔn)常見(jiàn)問(wèn)題集合...2006-11-11
Web的發(fā)展非常迅速，UI設(shè)計(jì)也越來(lái)越美觀，漂亮。同時(shí)也給WEB前端編碼提出了新的要求。鏈接元素在點(diǎn)擊時(shí)會(huì)出現(xiàn)虛線框，由于種種原因，您的主管可能要求你想辦法將鏈接虛線邊框出除。2008-05-05
小心：CSS代碼書(shū)寫(xiě)順序不同，導(dǎo)致顯示效果不一樣
小心：CSS代碼書(shū)寫(xiě)順序不同，導(dǎo)致顯示效果不一樣...2006-12-12
Firefox2中輸入框丟失光標(biāo)bug的解決方法
在Firefox2中某些情況下輸入框雖然可以輸入，但在獲取焦點(diǎn)時(shí)沒(méi)有文本輸入光標(biāo)的顯示，這個(gè)是非常惡心的bug，非常容易讓表單使用者有一種不能輸入的錯(cuò)覺(jué)，即使后來(lái)嘗試知道可以輸入，但也無(wú)法判斷光標(biāo)定位在哪兒。2008-05-05
CSS制造：鼠標(biāo)移上去顯示大圖...2006-12-12
firefox css自動(dòng)換行的實(shí)現(xiàn)方法
越發(fā)感覺(jué)網(wǎng)頁(yè)設(shè)計(jì)人員的辛苦，就一個(gè)自動(dòng)換行，2008-08-08
給自己的網(wǎng)站制作一個(gè)favicon.ico圖標(biāo)的實(shí)現(xiàn)方法
給自己的網(wǎng)站制作一個(gè)favicon.ico圖標(biāo)的實(shí)現(xiàn)方法...2007-03-03