兼容問(wèn)題整理( 二)
1.超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)的問(wèn)題
被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不再具有hover和active急凰,解決辦法是改變css的排列順序
a:link{}
a:visited{}
a:hover{}
a:active{}
2.游標(biāo)手指
cursor:pointer可以同時(shí)在IE和FF中顯示游標(biāo)手指,hand僅在IE中可以
3.頁(yè)面的最小寬度
min-width是一個(gè)非常方便的css命令昔搂,他可以指定元素最小也不能小于某個(gè)寬度呀洲,這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè),而他實(shí)際上把width當(dāng)做最小寬度來(lái)使计呈,為了讓這一命令在IE上也能使用掌挚,可以把一個(gè)div放在body下面雨席,然后為div指定一個(gè)類
.container{
min-width:600px;
width:expression(docunment.body.clientWidth<600?"600px":"auto")
}
第一個(gè)min-width是正常的,但第二行的width使用了JavaScript吠式,這只有IE才認(rèn)得陡厘,這也會(huì)是你的HTML文檔不太正規(guī),它實(shí)際上通過(guò)JavaScript的判斷來(lái)實(shí)現(xiàn)最小寬度
4.高度不適應(yīng)
高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)特占,特別是當(dāng)內(nèi)層對(duì)象使用margin或padding時(shí)糙置,例:
<div id="box"><p>p對(duì)象中的內(nèi)容</p></div>
css:
#box{background:#eee}
#box p{margin-top:20px;margin-bottom:20px;text-align:center}
解決辦法:在p對(duì)象上下各加兩個(gè)空的div對(duì)象
{height:0;overflow:hidden}或者給div加上border屬性
5.css hack
什么是瀏覽器hack?
當(dāng)我們使用不同的瀏覽器(Firefox IE6 IE7)訪問(wèn)同一個(gè)網(wǎng)站是目,或者頁(yè)面的時(shí)候谤饭,會(huì)出現(xiàn)一些不兼容的問(wèn)題,有的顯示出來(lái)正常懊纳,有的顯示出來(lái)不正常揉抵,我們?cè)诰帉慶ss的時(shí)候很惱火,剛修復(fù)了這個(gè)瀏覽器的問(wèn)題嗤疯,那個(gè)瀏覽器就有出現(xiàn)問(wèn)題冤今,而hack就是一種解決辦法,能在一個(gè)css獨(dú)立的寫支持不同瀏覽器的樣式
以下兩種方法能解決幾乎所有hack
1.茂缚!important(不是很推薦使用)
隨著IE7對(duì)戏罢!important的支持,阱佛!important現(xiàn)在只針對(duì)IE6的hack(注意寫法帖汞,記住該聲明位置需要提前)
代碼:
#wrapper{
width:100px!important; /*IE7+FF*/
width:80px /*IE6*/
}
2.+html,*html是IE特有的標(biāo)簽,F(xiàn)irefox暫不支持凑术,而+HTML又是IE7特有標(biāo)簽
#wrapper{width:120px}/*Firefox*/
*html#wrapper{width:80px}/*IE6*/
*+html#wrapper{width:60px}/*IE7*/
注意+HTML對(duì)IE7 的hack必須保證html頭部有如下聲明:
`<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">