改变div大小,ie下正确,ff下没一个正确

代码如下：
该如何修改  
测试时可以只需修改一个点即可,如果其他点的修改方法都一样...........
<!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>wwww</title>
<style type="text/css">
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{
        position:absolute;
        background:#C00;
        width:7px;
        height:7px;
        z-index:5;
        font-size:0;
}
#rLeftDown,#rRightUp{cursor:ne-resize;}
#rRightDown,#rLeftUp{cursor:nw-resize;}
#rRight,#rLeft{cursor:e-resize;}
#rUp,#rDown{cursor:n-resize;}#rRightDown{ bottom:-3px; right:-3px;}
#rLeftDown{ bottom:-3px; left:-3px;}
#rRightUp{ top:-3px; right:-3px;}
#rLeftUp{ top:-3px; left:-3px;}
#rRight{ right:-3px; top:50%}
#rLeft{ left:-3px; top:50%}
#rUp{ top:-3px; left:50%}
#rDown{ bottom:-3px; left:50%}
</style>
</head>
<body>
<div id='ss' style="height:100px; width:100px; border:1px solid #000000; position:absolute; left:200px; top:200px;" >
        <div id="rRightDown"> </div>
        <div id="rLeftDown"> </div>
        <div id="rRightUp"> </div>
        <div id="rLeftUp"> </div>
        <div id="rRight"> </div>
        <div id="rLeft"> </div>
        <div id="rUp"> </div>
        <div id="rDown"></div>
</div>
<script>
function $(Id){return document.getElementById(Id)};
var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};
var original =new Array(4),width,height;function Mright(container,e){
container.style.width = Math.max(e.clientX- original[2],0);
}function Mtop(container,e){
container.style.top    = Math.max(e.clientY,0);
container.style.top    = Math.min(e.clientY,height);
container.style.height = Math.max(height-e.clientY,0);
}function Mleft(container,e){
container.style.left  = Math.max(e.clientX,0);
container.style.left  = Math.min(e.clientX,width);
container.style.width = Math.max(width-e.clientX,0);
}function Mdown(container,e){
container.style.height = Math.max(e.clientY- original[3],0);
}function Drag(elm,container,fn,fn1){
        elm.onmousedown=function(event){
                var e = event || window.event;
original = [parseInt(CurrentStyle(container).width),parseInt(CurrentStyle(container).height),parseInt(CurrentStyle(container).left),parseInt(CurrentStyle(container).top)]
                width  = (parseInt(CurrentStyle(container).left)||0) + parseInt(CurrentStyle(container).width) ;
                height = (parseInt(CurrentStyle(container).top) ||0) + parseInt(CurrentStyle(container).height);
                document.onmousemove = function(event){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                        var e = event || window.event;
fn&&fn(container,e);
fn1&&fn1(container,e);
};
                document.onmouseup = function(){
                        document.onmousemove = null;
                        document.onmouseup   = null;
                }
        }
}
Drag($('rRight'),$('ss'),Mright);
Drag($('rUp'),$('ss'),Mtop);
Drag($('rRightUp'),$('ss'),Mtop,Mright);
Drag($('rLeft'),$('ss'),Mleft);
Drag($('rleftUp'),$('ss'),Mtop,Mleft);
Drag($('rDown'),$('ss'),Mdown);
Drag($('rLeftDown'),$('ss'),Mdown,Mleft);
Drag($('rRightDown'),$('ss'),Mdown,Mright);
</script>
</body>
</html>

解决方案 »

  1.   

    FF下 元素位置必须要带单位 也就是你所有container.style.left  = .... + "px" 都加上PX就可以了
      

  2.   


    <!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>wwww</title>
    <style type="text/css">
    #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{
            position:absolute;
            background:#C00;
            width:7px;
            height:7px;
            z-index:5;
            font-size:0;
    }
    #rLeftDown,#rRightUp{cursor:ne-resize;}
    #rRightDown,#rLeftUp{cursor:nw-resize;}
    #rRight,#rLeft{cursor:e-resize;}
    #rUp,#rDown{cursor:n-resize;}#rRightDown{ bottom:-3px; right:-3px;}
    #rLeftDown{ bottom:-3px; left:-3px;}
    #rRightUp{ top:-3px; right:-3px;}
    #rLeftUp{ top:-3px; left:-3px;}
    #rRight{ right:-3px; top:50%}
    #rLeft{ left:-3px; top:50%}
    #rUp{ top:-3px; left:50%}
    #rDown{ bottom:-3px; left:50%}
    </style>
    </head>
    <body>
    <div id='ss' style="height:100px; width:100px; border:1px solid #000000; position:absolute; left:200px; top:200px;" >
            <div id="rRightDown"> </div>
            <div id="rLeftDown"> </div>
            <div id="rRightUp"> </div>
            <div id="rLeftUp"> </div>
            <div id="rRight"> </div>
            <div id="rLeft"> </div>
            <div id="rUp"> </div>
            <div id="rDown"></div>
    </div>
    <script>
    function $(Id){return document.getElementById(Id)};
    var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};
    var original =new Array(4),width,height;function Mright(container,e){
        container.style.width = Math.max(e.clientX- original[2],0) + "px";
    }function Mtop(container,e){
        container.style.top    = Math.max(e.clientY,0) + "px";
        container.style.top    = Math.min(e.clientY,height) + "px";
        container.style.height = Math.max(height-e.clientY,0) + "px";
    }function Mleft(container,e){
        container.style.left  = Math.max(e.clientX,0) + "px";
        container.style.left  = Math.min(e.clientX,width) + "px";
        container.style.width = Math.max(width-e.clientX,0) + "px";
    }function Mdown(container,e){
        container.style.height = Math.max(e.clientY- original[3],0) + "px";
    }function Drag(elm,container,fn,fn1){
            elm.onmousedown=function(event){
                    var e = event || window.event;
                    original = [parseInt(CurrentStyle(container).width),parseInt(CurrentStyle(container).height),parseInt(CurrentStyle(container).left),parseInt(CurrentStyle(container).top)]
                    width  = (parseInt(CurrentStyle(container).left)||0) + parseInt(CurrentStyle(container).width) ;
                    height = (parseInt(CurrentStyle(container).top) ||0) + parseInt(CurrentStyle(container).height);
                    document.onmousemove = function(event){
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                            var e = event || window.event;
                            fn&&fn(container,e);
                            fn1&&fn1(container,e);
                    };
                    document.onmouseup = function(){
                            document.onmousemove = null;
                            document.onmouseup   = null;
                    }
            }
    }
    Drag($('rRight'),$('ss'),Mright);
    Drag($('rUp'),$('ss'),Mtop);
    Drag($('rRightUp'),$('ss'),Mtop,Mright);
    Drag($('rLeft'),$('ss'),Mleft);
    Drag($('rLeftUp'),$('ss'),Mtop,Mleft); // 你最牛的错误是 大小写搞错了
    Drag($('rDown'),$('ss'),Mdown);
    Drag($('rLeftDown'),$('ss'),Mdown,Mleft);
    Drag($('rRightDown'),$('ss'),Mdown,Mright);
    </script>
    </body>
    </html>
      

  3.   

    <!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>wwww</title>
    <style type="text/css">
    #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{
            position:absolute;
            background:#C00;
            width:7px;
            height:7px;
            z-index:5;
            font-size:0;
    }
    #rLeftDown,#rRightUp{cursor:ne-resize;}
    #rRightDown,#rLeftUp{cursor:nw-resize;}
    #rRight,#rLeft{cursor:e-resize;}
    #rUp,#rDown{cursor:n-resize;}#rRightDown{ bottom:-3px; right:-3px;}
    #rLeftDown{ bottom:-3px; left:-3px;}
    #rRightUp{ top:-3px; right:-3px;}
    #rLeftUp{ top:-3px; left:-3px;}
    #rRight{ right:-3px; top:50%}
    #rLeft{ left:-3px; top:50%}
    #rUp{ top:-3px; left:50%}
    #rDown{ bottom:-3px; left:50%}
    </style>
    </head>
    <body>
    <div id='ss' style="height:100px; width:100px; border:1px solid #000000; position:absolute; left:200px; top:200px;" >
            <div id="rRightDown"> </div>
            <div id="rLeftDown"> </div>
            <div id="rRightUp"> </div>
            <div id="rLeftUp"> </div>
            <div id="rRight"> </div>
            <div id="rLeft"> </div>
            <div id="rUp"> </div>
            <div id="rDown"></div>
    </div>
    <script>
    function $(Id){return document.getElementById(Id)};
    var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};
    var original =new Array(4),width,height,obj;function Mright(container,e){
        container.style.width = Math.max(e.clientX- original[2],0) + "px";
    }function Mtop(container,e){
        container.style.top    = Math.max(e.clientY,0) + "px";
        container.style.top    = Math.min(e.clientY,height) + "px";
        container.style.height = Math.max(height-e.clientY,0) + "px";
    }function Mleft(container,e){
        container.style.left  = Math.max(e.clientX,0) + "px";
        container.style.left  = Math.min(e.clientX,width) + "px";
        container.style.width = Math.max(width-e.clientX,0) + "px";
    }function Mdown(container,e){
        container.style.height = Math.max(e.clientY- original[3],0) + "px";
    }function Drag(elm,container,fn,fn1){
            elm.onmousedown=function(event){
                    var e = event || window.event;
    obj = elm;
                    original = [parseInt(CurrentStyle(container).width),parseInt(CurrentStyle(container).height),parseInt(CurrentStyle(container).left),parseInt(CurrentStyle(container).top)]
                    width  = (parseInt(CurrentStyle(container).left)||0) + parseInt(CurrentStyle(container).width) ;
                    height = (parseInt(CurrentStyle(container).top) ||0) + parseInt(CurrentStyle(container).height);
    if(document.all)obj.setCapture();
                    document.onmousemove = function(event){
                            var e = event || window.event;
                            fn&&fn(container,e);
                            fn1&&fn1(container,e);
    document.all?(obj.onlosecapture=function(){ss(obj)}):(obj.onblur=function(){ss(obj)})
                    };
                    document.onmouseup = function(){ss(obj)}
            }
    }function ss(elm){
        document.onmousemove = null;
        document.onmouseup   = null;
    if(document.all)elm.releaseCapture();
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }Drag($('rRight'),$('ss'),Mright);
    Drag($('rUp'),$('ss'),Mtop);
    Drag($('rRightUp'),$('ss'),Mtop,Mright);
    Drag($('rLeft'),$('ss'),Mleft);
    Drag($('rLeftUp'),$('ss'),Mtop,Mleft); 
    Drag($('rDown'),$('ss'),Mdown);
    Drag($('rLeftDown'),$('ss'),Mdown,Mleft);
    Drag($('rRightDown'),$('ss'),Mdown,Mright);
    </script>
    </body>
    </html>