js兼容IE6问题

应该是CSS兼容问题，或者写得还不完善。和JS没什么关系。

呀，标题有点css里面没写什么东西，所以不知道是什么原因引起的不兼容的问题

#content{
height:500px;
width:500px;
overflow: hidden;//this
}

改完了就是js问题
<!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=gb2312" />
<title>拖动DIV</title>
<style>
#content{
height:500px;
width:500px;
}#ser{
height:200px;
background-color:#CC0000;
}#res{
height:295px;
background-color:#33FF00;
}#bottom{
height:5px;
background-color:#000000;
}</style>
<script type="text/javascript">
window.onload=function()
{
    var content=document.getElementById("content");  //获取最大的div块
    var ser=document.getElementById("ser");          //获取上面的div块
    var res=document.getElementById("res");          //获取下面的div块
    var bottom=document.getElementById("bottom");    //获取中间响应拖动的div的块
    var mouseStart={};
    var bottomStart={};
    var originalContentHeight = content.offsetHeight;
    var originalSerHeight = 0;

    //鼠标在该div上时，改变鼠标样式
    bottom.onmouseover=function(){
        this.style.cursor="row-resize";
    };
    //鼠标移开时，使鼠标变回默认
    bottom.onmouseout=function(){
        this.style.cursor="default";
    };

    //鼠标按下时，做出相应的动作
    bottom.onmousedown=function(ev)
    {
        var oEvent=ev||event;

        //获取初始的上面的div的高度
        originalSerHeight = ser.offsetHeight;

        //获取当前的鼠标的坐标
        mouseStart.x=oEvent.clientX;
        mouseStart.y=oEvent.clientY;

        //获取焦点，做出相应的动作
        if(bottom.setCapture)
        {
            //鼠标移动的响应
            bottom.onmousemove=doDrag;

            //鼠标移开的响应
            bottom.onmouseup=stopDrag;
            bottom.setCapture();
        }
        else
        {
            document.addEventListener("mousemove",doDrag,true);
            document.addEventListener("mouseup",stopDrag,true);
        }
    };

    //鼠标移动响应的动作
    function doDrag(ev)
    {
        var oEvent=ev||event;

        //获取移动距离，即当前的鼠标的坐标减去开始移动的坐标
        var t=oEvent.clientY-mouseStart.y;

        //ser的高度即为移动的距离与之前ser本身的高度之和
        var h=t+originalSerHeight;
        //res的高度为content的高度减去ser的高和botton的高
        var h2=originalContentHeight - h - 5;

        //上面越界，即上面最小是50px
        if(h < 50)
        {
            ser.style.height="50px";
            res.style.height="445px";
        }



        //如果h2大于50，说明鼠标移动没有超出content的范围，即下面最小也是50px
        else if(h2 < 50)
        {
            ser.style.height="445px";
            res.style.height="50px";
        }
        else
        {
            ser.style.height=h+"px";
            res.style.height=h2+"px";

        }
    };
    //鼠标移开时响应的动作
    function stopDrag()
    {
        if(bottom.releaseCapture)
        {
            bottom.onmousemove=null;
            bottom.onmouseup=null;
            bottom.releaseCapture();
        }
        else
        {
            document.removeEventListener("mousemove",doDrag,true);
            document.removeEventListener("mouseup",stopDrag,true);
        }
    };
};
</script>
</head><body>
<div id="content">
  <div id="ser">
  </div>
  <div id="bottom">
  </div>
  <div id="res">
  </div>
</div>
</body>
</html>

这种方法可以，我总觉得使用overflow不太好。。

代码修改之前，获取的那个content的高度，为啥会不是设定的高度，能解释一下吗

解决方案 »