关于定位

要求:让浮标始终处于页面右下角
现象:IE6下用的absolute定位,其余浏览器用的fixed定位.页面加载时候显示对的.
但当双击窗口触发onresize事件的时候,IE6下定位是正常的.但IE8,FF下当把滚动条滚到最下面然后触发onresize的时候.
浮标不见了.估计是fixed定位的原因.大家帮看下.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
 </head> <body>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <script type="text/javascript">
var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };var isIE = navigator.userAgent.indexOf('MSIE') != -1;var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == "6");var addEvent = function(otarget, stype, fnhandler){
otarget.attachEvent ? otarget.attachEvent("on"+stype, fnhandler) : otarget.addEventListener(stype, fnhandler, false);
}var CurrentStyle = function(element){
return element.currentStyle || element.ownerDocument.defaultVeiw(element, null);
}var Bind = function(object, fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(){
return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
}
}var Extend = function(distination, source){
for(var property in source){
distination[property] = source[property];
}
return distination;
}var Class = {
create: function(){
return function(){
this.initialize.apply(this, arguments);
}
}
}
var ShortMsg = Class.create();
ShortMsg.prototype = {
initialize: function(msgbox, options){
this.MsgBox = $(msgbox);
this.SetOptions(options);
this._step = this.options.Step;
this._speed = this.options.Speed;
this._timer = null;
this.count = 0;
}, SetOptions: function(options){
this.options = {
Step: 2,
Speed: 50
};
Extend(this.options, options || {});
}, ShowMsgBox: function(){

var $d = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body;
this.MsgBox.style.left = ($d.scrollLeft + $d.clientWidth - this.MsgBox.offsetWidth) + "px";
this.MsgBox.style.top = ($d.scrollTop + $d.clientHeight - this.MsgBox.offsetHeight) + "px";
}, Init: function(){
this.MsgBox.style.position = !isIE6 ? "fixed" : "absolute";
this.MsgBox.style.display = "block";
if(isIE6){
addEvent(window, "scroll", Bind(this,this.ShowMsgBox));
}
addEvent(window, "resize", Bind(this,this.ShowMsgBox));
this.ShowMsgBox();
}}</script>
<div style="width:200px;height:120px;border:1px solid red;display:none" id="msgbox"> this is a message </div>
<script type="text/javascript">
<!--
var SM = new ShortMsg('msgbox');
SM.Init();
//-->
</script>
 </body>
</html>

解决方案 »

  1.   

    只在ff3下测试了   ie 8 没有!~
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
     </head> <body>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <script type="text/javascript">
    var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };var isIE = navigator.userAgent.indexOf('MSIE') != -1;var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == "6");var addEvent = function(otarget, stype, fnhandler){
        otarget.attachEvent ? otarget.attachEvent("on"+stype, fnhandler) : otarget.addEventListener(stype, fnhandler, false);
    }var CurrentStyle = function(element){
        return element.currentStyle || element.ownerDocument.defaultVeiw(element, null);
    }var Bind = function(object, fun){
        var args = Array.prototype.slice.call(arguments).slice(2);
        return function(){
            return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
        }
    }var Extend = function(distination, source){
        for(var property in source){
            distination[property] = source[property];
        }
        return distination;
    }var Class = {
        create: function(){
            return function(){
                this.initialize.apply(this, arguments);
            }
        }
    }
    var ShortMsg = Class.create();
    ShortMsg.prototype = {
        initialize: function(msgbox, options){
            this.MsgBox = $(msgbox);
            this.SetOptions(options);
            this._step = this.options.Step;
            this._speed = this.options.Speed;
            this._timer = null;
            this.count = 0;
        },    SetOptions: function(options){
            this.options = {
                Step:        2,
                Speed:        50    
            };
            Extend(this.options, options || {});
        },    ShowMsgBox: function(){
            var $d = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body;
            if(isIE6)
    {
    this.MsgBox.style.left = ($d.scrollLeft + $d.clientWidth - this.MsgBox.offsetWidth) + "px";
    this.MsgBox.style.top = ($d.scrollTop + $d.clientHeight - this.MsgBox.offsetHeight) + "px";
            }
    else
    {
    this.MsgBox.style.left = (Math.max($d.clientWidth,$d.scrollLeft) - this.MsgBox.offsetWidth) + "px";
    this.MsgBox.style.top = (Math.max($d.clientHeight,$d.scrollTop) - this.MsgBox.offsetHeight) + "px";
    }    },    Init: function(){    
            this.MsgBox.style.position = !isIE6 ? "fixed" : "absolute";
            this.MsgBox.style.display = "block";
            if(isIE6){
                addEvent(window, "scroll", Bind(this,this.ShowMsgBox));
            }        
            addEvent(window, "resize", Bind(this,this.ShowMsgBox));
            this.ShowMsgBox();
        }}</script>
    <div style="width:200px;height:120px;border:1px solid red;display:none" id="msgbox"> this is a message </div>
    <script type="text/javascript">
    <!--
        var SM = new ShortMsg('msgbox');
        SM.Init();
    //-->
    </script>
     </body>
    </html>
      

  2.   


    可以说下Math.max($d.clientWidth,$d.scrollLeft)为什么在FF要这么用呢?
      

  3.   

    这个 嘿嘿
    弄错了
    不需要这么搞
    fixed 定位的关系   只需要取可视范围就行了
    Math.max($d.clientWidth,$d.scrollLeft) =======>$d.clientWidthMath.max($d.clientWidth,$d.scrollLeft)是在ie6下做lightbox效果 计算最大范围用的
    这里用不着
    好象也不是 $d.scrollLeft   应该是$d.scrollWidthcloudgamer的boke里有介绍几个范围的东西 写的挺详细 可以去看看
    lightbox文章里面!~