Javascript 在IE中，相对DIV/画布内的Y位置行为不稳定

为了保持简单，下面的javascript和css在Chrome和Firefox中运行良好。一旦我在IE中测试它，当我触发任何与鼠标位置相关的代码（比如更改鼠标指针）后，Y值就完全疯狂了。它增加了90个像素或几乎是原来的两倍，等等。 代码和样式如下：

<style>
    #miContenedor{
        width:780px;
        height:1600px;
        margin:auto;
        margin-top:185px;
        position:relative;
        border: 4px solid black;
    }
    #miCanvas{
        background-image:url(Images/mat06pag34.png);
        background-repeat:no-repeat;
    }
</style>
<script>
canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(toi){
    var posx = toi.layerX;
    var posy = toi.layerY;
    if(toi.layerX == undefined || toi.layerY == undefined){
        posx = toi.offsetX;
        posy = toi.offsetY;
    }
}//ProcessClick

canvas.onmousemove = function(tamos){
    var posxX = tamos.layerX;
    var posyY = tamos.layerY;
    if(tamos.layerX == undefined || tamos.layerY == undefined){
        posxX = tamos.offsetX;
        posyY = tamos.offsetY;
    }
    var coords = posxX + "," + posyY; ctx.clearRect(700, 300, 80, 40); ctx.fillText(coords, 700, 320);
    if(posxX>=30 && posxX<=420 && posyY>=380 && posyY<=400){
        canvas.style.cursor = "help";
    }
    else{
        canvas.style.cursor = "default";
    }
}//onmousemove
</script>

#米康特内多尔{
宽度：780px；
高度：1600px；
保证金：自动；
边缘顶端：185px；
位置：相对位置；
边框：4倍纯黑；
}
#米坎瓦斯{
背景图片：url（Images/mat06pag34.png）；
背景重复：无重复；
}
canvas.addEventListener（'click'，ProcessClick，false）；
函数进程单击（toi）{
var posx=toi.layerX；
var posy=toi.layerY；
if（toi.layerX==未定义| | toi.layerY==未定义）{
posx=toi.offsetX；
posy=toi.offsetY；
}
}//ProcessClick
canvas.onmousemove=函数（tamos）{
var posxX=tamos.layerX；
var posyY=塔莫斯·莱耶里；
if（tamos.layerX==未定义| | tamos.layerY==未定义）{
posxX=tamos.offsetX；
posyY=tamos.offsetY；
}
var coords=posxX+“，”+posyY；ctx.clearRect（700,300,80,40）；ctx.fillText（coords，700,320）；
如果（posxX>=30&&posxX=380&&posyY发现是页面的滚动弄乱了我的坐标。尝试了scrollLeft和scrollTop，但最终找到了一个更简单的解决方案：首先尝试offsetX/offsetY，然后尝试layerX/layerY

canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(toi){
    var posx = toi.offsetX;
    var posy = toi.offsetY;
    if(toi.offsetX == undefined || toi.offsetY == undefined){
        posx = toi.layerX;
        posy = toi.layerY;
    }
    var coord = "Click en: " + posx + "," + posy;
    if(posx>=100 && posx<=200 && posy>=100 && posy<=200){
        ctx.clearRect(250, 235, 500, 30);
        ctx.fillText(coord, 250, 250);
    }
}//ProcessClick

canvas.onmousemove = function(tamos){
    var posxX = tamos.offsetX;
    var posyY = tamos.offsetY;
    if(tamos.offsetX == undefined || tamos.offsetY == undefined){
        posxX = tamos.layerX;
        posyY = tamos.layerY;
    }
    var coords = posxX + "," + posyY; ctx.clearRect(250, 335, 500, 30); ctx.fillText(coords, 250, 350);
    if(posxX>=100 && posxX<=200 && posyY>=100 && posyY<=200){
        canvas.style.cursor = "pointer";
    }
    else{
        canvas.style.cursor = "default";
    }
}//onmousemove

canvas.addEventListener（'click'，ProcessClick，false）；
函数进程单击（toi）{
var posx=toi.offsetX；
var posy=toi.offsetY；
if（toi.offsetX==未定义| | toi.offsetY==未定义）{
posx=toi.layerX；
posy=toi.layerY；
}
var coord=“单击en:“+posx+”，“+posy；
如果（posx>=100&&posx=100&&posy=100&&posxX=100&&POSYY第一次制作JSFIDLE时，你能创建一个工作演示吗？虽然我不能让HTML5工作。基本上，这里是一个简单的例子。画一个矩形，如果用户点击它，就会显示一些文本，如果鼠标在它上面，就会改变光标。希望这会有帮助。如果你需要使用完全限定的URLnt使图像/音频正常工作。