为什么我的程序在firefox下正常，而在ie8和chrome中提示框总是出现在最下面？

Question

注意：
不能用bind(mouseover)  这样来添加事件因为这些文字都是ajax返回的，并不在DOM里面。$('div .content')这样的选择器是找不到的。
    <div>
     <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br>
     <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br>
    </div>
    
    
    <p id="vtip" style="position:absolute"><img id="vtipArrow" src="vtip_arrow.png" />testtest<span class="content"></span></p>
    
    
function tip(evt,s){
        $('p#vtip').show();        xOffset = -10; // x distance from mouse
        yOffset = 10; // y distance from mouse 
        top = (evt.pageY + yOffset); 
        left = (evt.pageX + xOffset);        var str = $(s, "> .content").html();
        $('p#vtip .content').html(str);
        $('p#vtip').css("top", top+"px").css("left", left+"px").fadeIn("slow");
}
完整代码在这
http://omploader.org/vM2hzZg
请问怎样改 才能兼容ie8和chrome????谢谢

Answer 1

ie中不存在pageX和pageYfunction tip(evt,s){
        $('p#vtip').show();        var xOffset = -10; // x distance from mouse
        var yOffset = 10; // y distance from mouse 
        var x=evt.clientX+document.body.scrollLeft,y=evt.clientY+document.body.scrollTop;
        var top = (y + yOffset); 
        var left = (x + xOffset);        var str = $(s, "> .content").html();
        $('p#vtip .content').html(str);
        $('p#vtip').css("top", top+"px").css("left", left+"px").fadeIn("slow");
}