首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2012-05-29 
★★100分★★火狐下窗口onresize的时候DIV的位置调整的问题我设置了一个DIV的菜单,使它和input框下面对齐,现

★★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>

[解决办法]
如果你用过jquery的话,下面这段代码可能对你有用:

HTML code
<!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> 


[解决办法]
ls的在ff中怎么延迟呢
[解决办法]
顶一个先
[解决办法]

探讨
我终于找到原因了!!!
火狐下像素后面要加“px”

      divid.style.left=getAbsoluteLeft(btn)+"px";  //可以通过加减来控制一定的偏移量。
      divid.style.top=getAbsoluteTop(btn)+"px";

[解决办法]
恭喜,~~~jF
[解决办法]
jf
[解决办法]
恭喜LZ解决问题了,以后要习惯的加上PX
浏览器兼容是门“学问”,呵呵
[解决办法]
哎,IE的容错性,也不知道是帮人还是害人了
写代码还是尽量按标准来吧
[解决办法]
gx了,另学习了,px。。以前真没注意

热点排行