主页 M

让IE6也支持fixed定位

2014-05-19 网页编程网 网页编程网

估计在研发过程多多少少也用到了改属性吧.没错,这个属性可以使元素固定起来,可是IE6是很嚣张的无视它的,怎么办呢?生在这个无敌天国中的人民是很喜欢IE6的,你不可以就这么果断的不考虑它,不然产品经理他会找我到办公室谈话的。好了,当然做自己的博客的话可以无视它,说到大项目和用户群比较多的用户还是要考虑到。

既然IE6不支持固定定位(position:fixed),对其设置 'position:fixed' 无任何效果。那么我们就针对IE6做文章了。解决方案还是有的。由于 IE6 将 'position' 特性的 fixed 值当作错误值处理,从而使用 'position' 特性的初始值 static,即这个元素在 IE6变成了普通流中的静态元素,这将会造成布局混乱等多种兼容性问题。

近期做项目过程中需要到,所以才又动手,很无念的去考虑下IE6下面的情况,在高级浏览器中效果很理想,配合Css3,真是让我喜笑颜开啊。那么我们就来说下这个具体解决方案了。

解决方案:1.将body元素中添加_background-attachment:fixed; _background-image:url(about:blank);这两个属性,由于这个问题只在可耻的IE6下,所以就针对IE6写个hack。2.将需要用固定定位的元素中加上_position:absolute; _top:expression(offsetParent.scrollTop); _left:expression(offsetParent.scrollLeft);这个3个属性。简单吧。就这2个步骤就帮你把那无赖的IE6解决了。当使用过程中有些童鞋可能会说,啊,哥哥啊,大侠啊,不是我要的效果啊,我想要它和顶部有个距离啊。别慌张很简单_top:expression((offsetParent.scrollTop)+50); 这样后面的数字就是你需要的设置的距离。

阅读原文
阅读 3794
123 显示电脑版