★100分★火狐下窗口onresize的时候DIV的位置调整的有关问题
日期：2014-05-16 浏览次数：20388 次
★★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>
<font color="#ffffff">检索词：</font>
</td>
<td align="left" width="100">
<input type="text" size="65" name="q" id="q" />
</td>
<td align="left">
<input type="image" src="/images/button_search_1.gif"/>
</td>
</tr>
</table>
------解决方案--------------------
如果你用过jquery的话，下面这段代码可能对你有用：
我设置了一个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>
<font color="#ffffff">检索词：</font>
</td>
<td align="left" width="100">
<input type="text" size="65" name="q" id="q" />
</td>
<td align="left">
<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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
