纠结的IE6 Fixed Position

2009-12-11 21:57:25
王春生
转贴 3738

在开发 ZenTaoPMS过程中,遇到这样的一个问题,我需要将一个导航条固定在页面的最下方。这个功能在其他浏览器下面都很容易实现,直接使用css的fixed属性就好了。但在IE6下面,它并不支持这个属性。在网上查了很多的资料,都是使用IE6的hack来完成的,通常的代码如下:

<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%; overflow:auto;}
div#footer{position:absolute;}
</style>
<![endif]-->

但是同样的代码拷到ZenTaoPMS中后,发现滚动条没有了。忍了很久,后来改动了一番,将上面的代码改为:

body{height:100%; width:100%; overflow:auto; overflow-y:scroll;overflow-x:hidden;} 后面两个新增的属性是IE6特有的。滚动条出来了,效果不错。但随着问题就来了。

当使用js控制页面元素的时候,比如宽度,显示或者隐藏某一个元素的时候,会导致IE6下面的显示窗口越来越小。这个问题可是郁闷坏了。后来为了解决这个问题,写了一个js代码,每次当触发相应事件的时候,自动重置一下body的宽度和高度。世界又消停了。

但当我发现使用jquery的tablesorter控件之后,发现问题彻底复杂了。使用了tablesorter之后,只要对表格进行排序,就会引发上述的问题。怎么办?下载了tablesorter的原始js文件,一步一步的跟。发现js的代码还真是那么的不好读。无果。

后来想,是不是可以设定一个定时,每隔几秒钟重置一下body的样式表,不过这么改实在是龌龊。

晚上回到家之后,重新思考这个问题。为什么其他人的代码是可以的?我的代码和其他人的代码区别在于后来增加了一个width:100%的设置。我把这个拿掉之后,窗口自动缩小的问题没有了。但滚动条还是没有出来。

继续跟踪,为什么滚动条没有出来呢?这是我想到了yui,会不会是yui里面的问题呢?我把yui注释掉之后,发现滚动条是可以出来的。其中起作用的部分就是关于body的margin设置。于是我试着对body设置了margin-right:20px,my god, 滚动条又出来了。但这时候我注意到zentaopms中的导航条和其他的宽度不一样。仔细检查了一下navbar里面的设置,最终发现了罪魁祸首,navbar里面有关于ul的设置,其width:100%。这个100%导致navar的展示区域向右超出了10px。这个10像素就把滚动条挤到窗口外面去了,自然就看不到滚动条了。

最终,这个问题得到了圆满的解决。:)

评论列表
美好生活 2011-03-22 09:33:59
路过。。。。
1/1
发表评论
评论通过审核后显示。