ie6 css 实现fixed漂浮

首先:调试工具 

由于ie6 没有调试工具也没有console,在网上查了也不上,最终采用alert()定位,和firebug lite 调试页面

Firebug Lite简单 安装过程可以参考:http://www.woiweb.net/firebug-lite-debug.html

对于ie6中postion 位置的理解,ie6 没有fixed而对于很多小的tags  一般的漂浮都需要相对定位,


首先:  查到了  expression 这个ie6 和ie5 动态赋值css的属性,是早期微软DHTML的产物。

有了这个东西,就可以结合eval(),通过javascript进行获取高度。


然后 :就是获取高度了

    由于absolute = scroll(卷起高度)+client(屏幕高度)

    所以得到  top=document.documentElement.scrollTop+document.documentElement.clientHeight-myheight)

最终:_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-340))


这样子就可以在ie6 下达到底部漂浮的效果,一段css代码,实现漂浮

.float_tab{(

position:fixed;

_position:absolute;

zindex:5010;

right:5px;

bottom:5px;

_bottom:auto;

_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-340))}


另外还有一种是查到的封装好的代码,分享一下

直接调用 。position.fixed  就行,自动识别

position:function(){

        var isIE6 = !-[1,] && !window.XMLHttpRequest,

            html = document.getElementsByTagName('html')[0],

            dd = document.documentElement,

            db = document.body,

            dom = dd || db,

        // 获取滚动条位置

            getScroll = function(win){

                return {

                    left: Math.max(dd.scrollLeft, db.scrollLeft),

                    top: Math.max(dd.scrollTop, db.scrollTop)

                };

            };

        if (isIE6 && document.body.currentStyle.backgroundAttachment !== 'fixed') {

            html.style.backgroundImage = 'url(about:blank)';

            html.style.backgroundAttachment = 'fixed';

        };

        return {

            fixed: isIE6 ? function(elem){

                var style = elem.style,

                    doc = getScroll(),

                    dom = '(document.documentElement || document.body)',

                    left = parseInt(style.left) - doc.left,

                    top = parseInt(style.top) - doc.top;

                this.absolute(elem);

                style.setExpression('left', 'eval(' + dom + '.scrollLeft + ' + left + ') + "px"');

                style.setExpression('top', 'eval(' + dom + '.scrollTop + ' + top + ') + "px"');

            } : function(elem){

                elem.style.position = 'fixed';

            },

            absolute: isIE6 ? function(elem){

                var style = elem.style;

                style.position = 'absolute';

                style.removeExpression('left');

                style.removeExpression('top');

            } : function(elem){

                elem.style.position = 'absolute';

            }

        };

    }(),





转载于:https://my.oschina.net/NV9rBbk/blog/265622

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值