opera 问题

以下代码在opera下运行时出问题，高手帮忙改下
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
</head>
<body style="position:absolute; width:100%; height:100%;" >
<script>
document.onkeydown= function(e){
         e=e||window.event;
        ek=e.keyCode||e.which;
        if (ek==37) document.getElementById("myArea").style.left=document.getElementById("myArea").offsetLeft-5+"px";
        if (ek==39) document.getElementById("myArea").style.left=document.getElementById("myArea").offsetLeft+5+"px";
        if (ek==38) document.getElementById("myArea").style.top=document.getElementById("myArea").offsetTop-5+"px";
        if (ek==40) document.getElementById("myArea").style.top=document.getElementById("myArea").offsetTop+5+"px";
}
</script>
<div id=myArea style="position:absolute; top:20px; left:20px; height:50px; width:50px; background-color:#00FF00"></div>
</body>
</html>

解决方案 »

  1.   


    我试过了，IE，FF，SAFARI都没问题你在IE上运行有问题吗 》？
      

  2.   

    你在body上写这些样式做什么？<body style="position:absolute; width:100%; height:100%;" >去掉就OK<html>
    <head>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
    </head>
    <body>
    <script>
    document.onkeydown= function(e){
             e=e||window.event;
            ek=e.keyCode||e.which;
            var da = document.getElementById("myArea"),daol = da.offsetLeft,daot = da.offsetTop|0;
            switch(ek){
                    case 37:da.style.left=daol-5+"px";break;
                    case 39:da.style.left=daol+5+"px";break;
                    case 38:da.style.top=daot-5+"px";break;
                    case 40:da.style.top=daot+5+"px";break;
                    default:break;
            }
    }
    </script>
    <div id=myArea style="position:absolute;top:20px; left:20px;height:50px; width:50px;background-color:#00FF00">test</div>
    </body>
    </html>
      

  3.   

    <html>
    <head>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
    </head>
    <body style="position:absolute; width:100%; height:100%;" >
    <script>
    document.onkeydown= function(e){
             e=e||window.event;
            ek=e.keyCode||e.which;

    var ma = document.getElementById("myArea");

            if (ek==37) ma.style.left = ma.style.left.substring(0, 2) - 5 + 'px';
            if (ek==39) ma.style.left = ma.style.left.substring(0, 2) + 5 + 'px';
            if (ek==38) ma.style.top = ma.style.top.substring(0, 2) - 5 + 'px';
            if (ek==40) ma.style.top = ma.style.top.substring(0, 2) + 5 + 'px';
    }
    </script>
    <div id=myArea style="position:absolute; top:20px; left:20; height:50px; width:50px; background-color:#00FF00"></div>
    </body>
    </html>
      

  4.   

            if (ek==37) ma.style.left = ma.style.left.substring(0, 2) - 5 + 'px'; 
            if (ek==39) ma.style.left = ma.style.left.substring(0, 2) - 0 + 5 + 'px'; //转化整数
            if (ek==38) ma.style.top = ma.style.top.substring(0, 2) - 5 + 'px'; 
            if (ek==40) ma.style.top = ma.style.top.substring(0, 2) - 0 + 5 + 'px'; //转化整数
      

  5.   

    你把body里面的style="position:absolute; width:100%; height:100%;"去掉就OK。<html>
    <head>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
    </head>
    <body>
    <script>
    document.onkeydown= function(e){ e = e||window.event;
    ek = e.keyCode||e.which; if (ek==37) document.getElementById("myArea").style.left=document.getElementById("myArea").offsetLeft-5+"px";
    if (ek==39) document.getElementById("myArea").style.left=document.getElementById("myArea").offsetLeft+5+"px";
    if (ek==38) document.getElementById("myArea").style.top=document.getElementById("myArea").offsetTop-5+"px";
    if (ek==40) document.getElementById("myArea").style.top=document.getElementById("myArea").offsetTop+5+"px";

    document.getElementById("test").innerHTML = "left:" + document.getElementById("myArea").style.left + "<br/>" + "offsetLeft:" + document.getElementById("myArea").offsetLeft + "<br/>" + "offsetTop:" + document.getElementById("myArea").offsetTop ;


    }
    </script>
    <div id="test"></div>
    <div id=myArea style="position:absolute; top:20px; left:20px; height:50px; width:50px; background-color:#00FF00"></div>
    </body>
    </html>
      

  6.   

    问题应该出在给body style="position:absolute; width:100%; height:100%;" 样式后，opera与其他浏览器的解释不一样造成的。
    下面这个代码在oprea下运行正好，其他浏览器则会出问题。
    <html>
    <head>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
    </head>
    <body style="position:absolute; width:100%; height:100%;" >
    <script>
    document.onkeydown= function(e){ e = e||window.event;
    ek = e.keyCode||e.which; if (ek==37) document.getElementById("myArea").style.left=document.getElementById("myArea").offsetLeft-5-8+"px";
    if (ek==39) document.getElementById("myArea").style.left=document.getElementById("myArea").offsetLeft+5-8+"px";
    if (ek==38) document.getElementById("myArea").style.top=document.getElementById("myArea").offsetTop-5-8+"px";
    if (ek==40) document.getElementById("myArea").style.top=document.getElementById("myArea").offsetTop+5-8+"px"; document.getElementById("test").innerHTML = "left:" + document.getElementById("myArea").style.left + "<br/>" + "offsetLeft:" + document.getElementById("myArea").offsetLeft + "<br/>" + "offsetTop:" + document.getElementById("myArea").offsetTop ;
    }
    </script>
    <div id="test"></div>
    <div id=myArea style="position:absolute; top:20px; left:20px; height:50px; width:50px; background-color:#00FF00"></div>
    </body>
    </html>如果一定要保留这个样式，你不妨为opera单独给段数值判断。
      

  7.   

    一直按住方向键的时候，在opera还是没有持续滚动.......
    而其他浏览器就可以