现在的位置: 首页 > 综合 > 正文

IE Mobie6清除浮动

2013年05月29日 ⁄ 综合 ⁄ 共 986字 ⁄ 字号 评论关闭

看来已经有很多中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


抱歉!评论已关闭.