如何让DIV正好在文本框的下面？（兼容ie/firefox）


<!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 runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>信息搜索平台</title>
<script type="text/javascript">
/** 
* 取得某元素在页面中相对页面左上顶点的位置 
*/ 
function getOffset(obj){ 
    var offsetleft = obj.offsetLeft; 
    var offsettop = obj.offsetTop; 
    while (obj.offsetParent != document.body) 
    { 
        obj = obj.offsetParent; 
        offsetleft += obj.offsetLeft; 
        offsettop += obj.offsetTop; 
    } 
    return {Left : offsetleft, Top : offsettop}; 
} 
</script>
</head>
<body>
  <table width="600" border="0" cellspacing="0" cellpadding="2">
<tr>
      <td height="150" align="center"></td>
    </tr>
    <tr>
      <td height="40" align="center" bgcolor="#F6F6F6">
<input type="text" size="50" id="txtSearch" autocomplete="off" maxlength="255" title="搜我 搜索" style="height:20px; padding-top:5px;" />&nbsp;<input type="button" id="btnSearch" runat="server" value="搜我一下" style="height:30px;" />      </td>
    </tr>
  </table><div id="divList" style="position:absolute;border:solid 1px #0000ee;backgroundColor:#FFFFFF;width:50px;"></div><script type="text/javascript">
var o=document.getElementById("txtSearch");
var b=document.getElementById("divList");
var l=getOffset(o).Left;
var t=getOffset(o).Top;
var w=o.offsetWidth;
var h=o.offsetHeight;var i=t+h;//alert ("w="+w+"L="+l+"t="+t);
b.style.left=l+"px";
b.style.top=i+"px";
b.style.width=w+"px";
b.style.height=200+"px";
</script></body>
</html>
===============以上在fireFox上运行可以，但ie6、ie7都出现错位？

解决方案 »

  1.   

    有人反应是<script type="text/javascript"> 这句有问题
    你试试看只要<script>
      

  2.   


    //判断浏览器类型代码
    function Browser()
    {
            var ua, s, i;
            this.isIE = false;
            this.isNS = false;
            this.isOP = false;
            this.isSF = false;        ua = navigator.userAgent.toLowerCase();        s = "opera";
            if ((i = ua.indexOf(s)) >= 0){this.isOP = true;return;}        s = "msie";
            if ((i = ua.indexOf(s)) >= 0){this.isIE = true;return;}        s = "netscape6/";
            if ((i = ua.indexOf(s)) >= 0) {this.isNS = true;return;}        s = "gecko";
            if ((i = ua.indexOf(s)) >= 0) {this.isNS = true;return;}        s = "safari";   
            if ((i = ua.indexOf(s)) >= 0) {this.isSF = true;return;}
    }
      

  3.   

    是这个原因，IE下面BODY默认的有10个px的margin，把margin设置为0即可。
        <style>
        html,body{
         margin:0px;
        }
        </style>
    测试通过。
      

  4.   

    function getOffset(obj){ 
        var offsetleft = obj.offsetLeft; 
        var offsettop = obj.offsetTop; 
        while (obj.offsetParent != document.body) 
        { 
            obj = obj.offsetParent; 
            offsetleft += obj.offsetLeft; 
            offsettop += obj.offsetTop; 
        } 
        offsetleft += document.body.offsetLeft; 
        offsettop += document.body.offsetTop; 
        return {Left : offsetleft, Top : offsettop}; 
    } 
      

  5.   

    <style>
    body{
    margin:0px; padding:0px;
    }
    </style>
      

  6.   

    为什么不用css定义页面元素的位置
    <!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 runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>信息搜索平台 </title>
    </head>
    <body>
      <table width="600" border="0" cellspacing="0" cellpadding="2">
    <tr>
          <td height="150" align="center"> </td>
        </tr>
        <tr>
          <td height="40" bgcolor="#F6F6F6">
    <div style="position:relative;">
    <input type="text" size="50" id="txtSearch" autocomplete="off" maxlength="255" title="搜我 搜索" style="height:20px; padding-top:5px;" />&nbsp; <input type="button" id="btnSearch" runat="server" value="搜我一下" style="height:30px;" />
    <div id="divList" style="position:absolute;left:0;top:30px;height:100px;border:solid 1px #0000ee;backgroundColor:#FFFFFF;width:500px;"> </div>
    </div>
          </td>
        </tr>
      </table>
    </body>
    </html>