这段代码在IE9中能动在Chrome浏览器中无法动。该怎么解决

这段代码在IE9中能动在Chrome浏览器中无法动。
css.css外部样式表

CSS code

/*水平翻转*/
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}

/*垂直翻转*/
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    /*IE*/
    filter:FlipV;
}

* {margin:0,0}

.box{
    margin:100px 300px;
    width:500px;
    height:300px;
    border:1px solid blue;
    background-color:#B4CDCD;
    position:absolute;
}

#pic{
    position:absolute;
    left:0;
    top:0;
    border:1px solid red;
    
}
.ctrl{
    margin:50px auto 0 auto;
    width:502px;
    text-align:center;
}

js.js外部文件

JScript code

function Dog()
{
    this.move=function(n)
    {
        this.x=0;
        this.y=0;
        switch(n)
        {
            case 0:
                var p=document.getElementById('pic');
                var top=p.currentStyle.top;
                top=parseInt(top.substr(0,top.length-2));
                p.style.top=(top-10)+"px";
                break;
            case 1:
                var p=document.getElementById('pic');
                var top=p.currentStyle.top;
                top=parseInt(top.substr(0,top.length-2));
                p.style.top=(top+10)+"px";
                break
            case 2:
                var p=document.getElementById('pic');
                var left=p.currentStyle.left;
                left=parseInt(left.substr(0,left.length-2));
                p.style.left=(left+10)+"px";
                break;
            case 3:
                var p=document.getElementById('pic');
                var left=p.currentStyle.left;
                left=parseInt(left.substr(0,left.length-2));
                p.style.left=(left-10)+"px";
                break
        }
    }
}

var dog=new Dog();

function move(n)
{    
    switch(n)
        {
            case 0:
                dog.move(n);
                break
            case 1:
                dog.move(n);
                break
            case 2:
                dog.move(n);
                break
            case 3:
                dog.move(n);
                break
        }
}

html

HTML code

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<script type="text/javascript" src="./js/js.js" ></script>
<link rel="stylesheet" type="text/css" href="./css/css.css" />
</head>

<body>
    <div class="box"><img id="pic" class="flipx" src="./img/dog.gif" /></div>
    <div class="ctrl">
        <input type="button" name="up" value="上" onclick="move(0)" />
        <input type="button" name="down" value="下" onclick="move(1)" />
        <input type="button" name="left" value="左" onclick="move(2)" />
        <input type="button" name="right" value="右" onclick="move(3)" />
    </div>
</body>

</html>

------解决方案--------------------
p.style.left=(left-10)+"px";
这里应该有问题吧，如果是 = 后面就不要px,如果后面有px，就用:
p.style.lfet:(left-10)+"px";

or

p.style.left = (left-10);

这段代码在IE9中能动在Chrome浏览器中无法动。该怎么解决

相关推荐