|
|
現(xiàn)在全屏的半透明遮罩層在web2.0網(wǎng)站應(yīng)用非常廣泛了，絕大多數(shù)遮罩是通過(guò)計(jì)算頁(yè)面大小，然后覆蓋一個(gè)與頁(yè)面同等大小的層實(shí)現(xiàn)，如騰訊qzone, wordpress后臺(tái)。這種方式本來(lái)無(wú)可非議，但是在頁(yè)面很長(zhǎng)的時(shí)候在IE8下會(huì)失效（國(guó)外資料的解釋是與機(jī)器顯卡相關(guān)），有些完美情節(jié)的同學(xué)遇到這個(gè)問(wèn)題后就抓破了頭，無(wú)奈之下甚至想讓IE8強(qiáng)制使用IE7的方式解析他的作品。其實(shí)我們有一個(gè)更好的方法，咱們用CSS去解決它！
還記得“position:fixed”嗎？它是css2的一個(gè)新增的屬性，他可以讓一個(gè)元素靜止在頁(yè)面上，拖動(dòng)滾動(dòng)條也不會(huì)動(dòng)，如Qzone頂部固定的導(dǎo)航欄就是這樣實(shí)現(xiàn)的。同樣我們也可以用一個(gè)100%高寬的層覆蓋瀏覽器視口，這樣就可以實(shí)現(xiàn)全屏遮罩了。不用再計(jì)算頁(yè)面的大小，調(diào)整瀏覽器大小的時(shí)候也不要去動(dòng)態(tài)修改尺寸了。