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