★★100分★★火狐下窗口onresize的时候DIV的位置调整的问题

我设置了一个DIV的菜单，使它和input框下面对齐，现在在窗口尺寸变化的时候DIV的位置会跑偏，我使用了onresize来重新定位，在IE下好使，但是火狐下就不起作用有没有什么好办法能适应两种浏览器。
代码如下：
样式：
#box{ width:100px; height:100px; background-color:#999999; position:fixed;_position:absolute; top:200px; left:600px;}JS片断：
function showdiv()
{
    var divid=document.getElementById("box");
       var btn=document.getElementById("q");
       divid.style.left=getAbsoluteLeft(btn);  //可以通过加减来控制一定的偏移量。 
       divid.style.top=getAbsoluteTop(btn);
}getAbsoluteLeft = function(obj){
//获取指定元素左上角的横坐标（相对于body）
/*
obj | 指定的元素对象
*/
 var selfLeft = 0;
 var element = obj;
 while(element){
  selfLeft = selfLeft + element.offsetLeft;
  element = element.offsetParent;
 };
 return selfLeft;
}getAbsoluteTop = function(obj){
//获取指定元素左上角的纵坐标（相对于body）
/*
obj | 指定的元素对象
*/
 var selfTop = 0
 var element = obj;
 while(element){
  selfTop = selfTop + element.offsetTop;
  element = element.offsetParent;
 };
 return selfTop;
}HTML片断: <body onload="showdiv();" onresize="showdiv()">
<div id="box" style="display:none">
<table border="0" width="80%" cellspacing="1"  >
                    <tr>
                        <td  align="rgiht" nowrap>
                            &nbsp;
                            <font color="#ffffff">检索词：</font>
                        </td>
                        <td  align="left" width="100">
                            <input type="text" size="65" name="q" id="q" />
                        </td>
                        <td  align="left">&nbsp;&nbsp;                            
                            <input type="image" src="/images/button_search_1.gif"/>
                        </td>
                    </tr>
                </table>

解决方案 »

  1.   

    如果你用过jquery的话，下面这段代码可能对你有用：<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>居中显示</title>
    <script type="text/javascript" src="http://www1.zhaopin.com/Publish/Company/common/jquery/1.3.2pack/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){ var container = $("#container"); (function(){
    var _size = _getPageSize();
    container.css({
    height: _size[3]
    });
    })(); $(window).resize(function(){
    var _size = _getPageSize();
    container.css({
    height: _size[3]
    });
    });

    function _getPageSize() {
    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {
    xScroll = window.innerWidth + window.scrollMaxX;
    yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
    xScroll = document.body.scrollWidth;
    yScroll = document.body.scrollHeight;
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
    xScroll = document.body.offsetWidth;
    yScroll = document.body.offsetHeight;
    }
    var windowWidth, windowHeight;
    if (self.innerHeight) { // all except Explorer
    if(document.documentElement.clientWidth){
    windowWidth = document.documentElement.clientWidth; 
    } else {
    windowWidth = self.innerWidth;
    }
    windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
    windowWidth = document.body.clientWidth;
    windowHeight = document.body.clientHeight;
    }
    // for small pages with total height less then height of the viewport
    if(yScroll < windowHeight){
    pageHeight = windowHeight;
    } else { 
    pageHeight = yScroll;
    }
    // for small pages with total width less then width of the viewport
    if(xScroll < windowWidth){
    pageWidth = xScroll;
    } else {
    pageWidth = windowWidth;
    }
    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
    return arrayPageSize;
    };
    });
    </script>
    </head><body style="margin:0px;">
    <table id="container" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center" valign="middle">
         <div style="width:200px; height:100px; border:#000000 1px solid;">
            
            </div>
        </td>
      </tr>
    </table>
    </body>
    </html>
      

  2.   

    jquery我知道，但可以不用jquery吗？就用最简单的JS不能实现吗，用最少的代码。
      

  3.   

    我终于找到原因了！！！
    火狐下像素后面要加“px”       divid.style.left=getAbsoluteLeft(btn)+"px";   //可以通过加减来控制一定的偏移量。 
           divid.style.top=getAbsoluteTop(btn)+"px";
      

  4.   

    本来就是要加px的，这是标准。只不过ie会自动帮你加上就是了。
    要搞web兼容，就尽量按标准来，兼容方面的东西很多的。
      

  5.   

    恭喜LZ解决问题了，以后要习惯的加上PX
    浏览器兼容是门“学问”，呵呵
      

  6.   

    火狐下这个resize时间根本不执行  上面代码里面绑定了resize事件  在火狐下也是不会执行的  请把代码测试一下再放上去  谢谢
      

  7.   

    同上。
    我也正是在解决火狐下resize不执行的问题
      

  8.   

    我的也是div的resize不触发,这个怎么回事啊