IE Mobie6清除浮动
看來已經有很多中window的毒了,平時操作系統是window,現在還好多人用window mobie,看來已經習慣了window的使用方式。做前端開發,有個IE 6已經夠受的了,沒想到半路殺出個IE Mobie。期待IE6被埋葬的一天。
????? 做幾個頁面,要求即在web上訪問,又像wap站點一樣,支持大部分手機訪問。web頁面當然可以做的花花綠綠的,使用css-sprit來制作很炫的效果。想來wap上也能用上一點背景圖,先貼上再說。
說說問題,有一個bar,左邊是導航,右邊顯示用戶登錄信息。bar有背景。當然,最常用的方法是使用浮動。基于手機要訪問,導航向左浮動,用戶信息向右浮動。再使用最常用的清除浮動方式清除下浮動。
.hdnav:after{display:block;
clear:both;
content: "020";
height: 0;
}
.hdnav{zoom:1;}
再用IETester及其他常用瀏覽器測試下,良好。再使用Wap站點的DTD,手機上訪問應該問題不大,先交差。
????? 沒過多久,問題就出來了。window mobie上有樣式問題!再用其他手機(iphone、android、nokia)look,look,都好好的。哎,又是IE!不是在IE6、iE5.5下都測試過的嘛,怎么跑到這個IE Mobie上又有問題!仔細分析下,原來是清除浮動的地方有問題。先換了最原始的清除浮動方法試試,
(也就是添加一個多余的元素,設置樣式為clear:both),乖乖,還是不行,怎么會?怎么辦?
???? 想來想去,試來試去,給hdnav添加一個邊框,看看這個元素具體在哪。奇跡出現了,hdnav的背景出來了,也就是清除浮動成功了!就這么著吧,只是一個border-top,并把它的border-color設為transparet,效果就出來了。嘗試下去掉這個多余的元素,使用原來的.hdnav:after來清除浮動,然后再加上border-top:1px solid transparent。還是不行!乖乖,還是這樣來吧。
這個border做了個什么事情呢,想來是使IE Mobie haslayout。具體是不是呢,先貼兩篇haslayout的博客,忙完手頭上的事情再好好研究下這個東東。
IE LasLayOut參考:
IE Haslayout 詳解
On having layout
轉載于:https://www.cnblogs.com/muguaworld/archive/2010/06/02/1750217.html
總結
以上是生活随笔為你收集整理的IE Mobie6清除浮动的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 试管婴儿跟正常婴儿一样吗?
- 下一篇: 世预赛欧洲区附加赛时间确定