IE Mobie6清除浮動(dòng)
看來已經(jīng)有很多中window的毒了,平時(shí)操作系統(tǒng)是window,現(xiàn)在還好多人用window mobie,看來已經(jīng)習(xí)慣了window的使用方式。做前端開發(fā),有個(gè)IE 6已經(jīng)夠受的了,沒想到半路殺出個(gè)IE Mobie。期待IE6被埋葬的一天。
做幾個(gè)頁面,要求即在web上訪問,又像wap站點(diǎn)一樣,支持大部分手機(jī)訪問。web頁面當(dāng)然可以做的花花綠綠的,使用css-sprit來制作很炫的效果。想來wap上也能用上一點(diǎn)背景圖,先貼上再說。
說說問題,有一個(gè)bar,左邊是導(dǎo)航,右邊顯示用戶登錄信息。bar有背景。當(dāng)然,最常用的方法是使用浮動(dòng)。基于手機(jī)要訪問,導(dǎo)航向左浮動(dòng),用戶信息向右浮動(dòng)。再使用最常用的清除浮動(dòng)方式清除下浮動(dòng)。
display:block;
clear:both;
content: "020";
height: 0;
}
.hdnav{zoom:1;}
再用IETester及其他常用瀏覽器測(cè)試下,良好。再使用Wap站點(diǎn)的DTD,手機(jī)上訪問應(yīng)該問題不大,先交差。
沒過多久,問題就出來了。window mobie上有樣式問題!再用其他手機(jī)(iphone、android、nokia)look,look,都好好的。哎,又是IE!不是在IE6、iE5.5下都測(cè)試過的嘛,怎么跑到這個(gè)IE Mobie上又有問題!仔細(xì)分析下,原來是清除浮動(dòng)的地方有問題。先換了最原始的清除浮動(dòng)方法試試,
(也就是添加一個(gè)多余的元素,設(shè)置樣式為clear:both),乖乖,還是不行,怎么會(huì)?怎么辦?
想來想去,試來試去,給hdnav添加一個(gè)邊框,看看這個(gè)元素具體在哪。奇跡出現(xiàn)了,hdnav的背景出來了,也就是清除浮動(dòng)成功了!就這么著吧,只是一個(gè)border-top,并把它的border-color設(shè)為transparet,效果就出來了。嘗試下去掉這個(gè)多余的元素,使用原來的.hdnav:after來清除浮動(dòng),然后再加上border-top:1px solid transparent。還是不行!乖乖,還是這樣來吧。
這個(gè)border做了個(gè)什么事情呢,想來是使IE Mobie haslayout。具體是不是呢,先貼兩篇haslayout的博客,忙完手頭上的事情再好好研究下這個(gè)東東。
IE LasLayOut參考:
浙公網(wǎng)安備 33010602011771號(hào)