IE FF ff不同浏览器的菜单定位 问题？？？java

   浏览器问题、IE与Firefox 中的菜单定位问题、这里的菜单是自定义菜单、页面loading时 重新设置每个 超链接的右击菜单
原先是好的：可在加入W3C后在Firefox 中的显示位置就不一样了、不管怎样就显示在浏览器的中间部分、由于加入W3C后、导致了定位差异、   网友们、有没有遇到相关的问题呢！ 能否有好的办法解决以上问题呢？
如果您看到下面的 代码 运行效果后：你就清楚了、第一次看是 请先将最上面的W3C 代码去掉、第二次加上、效果明显<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>table</title>
 <style type="text/css">
 .youjian{width:150px; float:left; border:1px solid #999999; background-color:#efefef;position: absolute; top: 609px; left: 498px; z-index: 5; text-align:left;}
 .youjian ul{width:150px; float:left; height:20px; padding-top:5px;}
 .youjian li{height:20px; display:inline; padding-top:2px; list-style-type:none;text-align:left;}
 .youjian li a:hover{background-color:#000099;}
a.yj:link {color: #000000;text-decoration: none;}
a.yj:visited {color: #000000;text-decoration: none; }
a.yj:hover {color: #ffffff;text-decoration: none; background-color:#000099;}
a.yj:active {color: #ffffff;text-decoration: none;}
#recomend{
width:400px;
height:220px;
background:#EDF1F8;
border: 2px solid #849BCA;
margin-top:2px;
margin-left:2px;
float:left;
overflow:hidden;
position:absolute;
left:0px;
top:0px;
cursor:move;
float:left;
/*filter:alpha(opacity=50);*/

}
.body{font-family: "宋体";font-size: 12px;color:#000000; text-align:center; line-height:1.5;background-color:#ffffff;}
</style>  <script type="text/javascript">
//---可以实现ff浏览器中的右击效果*****实现ff事件event***************************
function __firefox(){ 
HTMLElement.prototype.__defineGetter__("runtimeStyle", __element_style); 
window.constructor.prototype.__defineGetter__("event", __window_event); 
Event.prototype.__defineGetter__("srcElement", __event_srcElement); 
} 
function __element_style(){ 
return this.style; 
} 
function __window_event(){ 
return __window_event_constructor(); 
} 
function __event_srcElement(){ 
return this.target; 
} 
function __window_event_constructor(){ 
if(document.all){ 
return window.event; 
} 
var _caller = __window_event_constructor.caller; 
while(_caller!=null){ 
var _argument = _caller.arguments[0]; 
if(_argument){ 
var _temp = _argument.constructor; 
if(_temp.toString().indexOf("Event")!=-1){ 
return _argument; 
} 
} 
_caller = _caller.caller; 
} 
return null; 
} 
if(window.addEventListener){ 
__firefox(); 
}
//****************之上***********
function patencyRowMove(divTag)
{
divTag.style.backgroundColor = "#000099";
divTag.style.color = "white";
divTag.style.cursor ="hand";


}
function patencyRowOut(divTag)
{
divTag.style.backgroundColor = "";
divTag.style.color = "black";
}
</script>
<script>
function init()
{
var alla=document.getElementsByTagName("a");
//重构页面中非手机窗口部分的含有wapurl链接地址的右键菜单
for(i=0;i<alla.length;i++) {
alla[i].oncontextmenu=new Function("menushow(this,'addmenu');return false");
}
}
//**********************************************主题部分
function menushow(v,mname){ 
//v=指的是：当前邮件连接对象
//mname=指的是：菜单对象、这里用的是Div
//event.cancelBubble = true;//阻隔事件
var tob=document.getElementById(mname);
tob.style.display="block";
tob.style.top=event.clientY+document.body.scrollTop;
if (event.clientY+parseInt(tob.offsetHeight)>parseInt(document.body.clientHeight)) 
tob.style.top=document.body.clientHeight+document.body.scrollTop-parseInt(tob.offsetHeight);
tob.style.left=event.clientX+document.body.scrollLeft;
if (event.clientX+parseInt(tob.offsetWidth)>parseInt(document.body.clientWidth) ) 
tob.style.left=document.body.clientWidth+document.body.scrollLeft-parseInt(tob.offsetWidth);
document.body.onclick=new Function("menuhide('"+mname+"')");
cmenu=mname;
}
function menuhide(mname){
if (!mname) return;
var tobs=document.getElementById(mname);
tobs.style.display="none";
}
//**********************************************主题部分
</script>
</head>
<body onload="init();">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<center>
<a  href = "#">菜单显示 请右击</a>
</center>
<div  class="youjian" style="display:none" id="addmenu">
      <ul onmousemove="patencyRowMove(this);" onmouseout="patencyRowOut(this);" >
           <li style="width:5px"></li>
           <li style="width:15px; margin-left:-2px"><img src="/images/1s.gif" width="14" height="11" align="absmiddle" border="0"></li>
       <li style="width:128px" >aaaaaaaa</li>
  </ul>
  <ul onmousemove="patencyRowMove(this);" onmouseout="patencyRowOut(this);">
       <li style="width:5px"></li>
       <li style="width:15px"><img src="/images/tp.gif" width="13" height="11" align="absmiddle" border="0"></li>
       <li style="width:128px;">bbbbbbbb</li>
  </ul>
  <ul onmousemove="patencyRowMove(this);" onmouseout="patencyRowOut(this);"  style="border-bottom:1px solid #cccccc;">
       <li style="width:5px"></li>
       <li style="width:15px"><img src="/images/ck.gif" width="13" height="11" align="absmiddle" border="0"></li>
       <li  style="width:128px;" >cccccccc</li>
  </ul>
  <ul onmousemove="patencyRowMove(this);" onmouseout="patencyRowOut(this);">
       <li style="width:5px"></li>
           <li style="width:15px"><img src="/images/m.gif" width="14" height="14" align="absmiddle" border="0"></li>
       <li  style="width:128px;">dddddddd</li>
  </ul>
  <ul  onmousemove="patencyRowMove(this);" onmouseout="patencyRowOut(this);">
       <li style="width:5px"></li>
       <li style="width:15px"><img src="/images/a.gif" width="14" height="13" align="absmiddle" border="0"></li>
       <li style="width:128px">eeeeeeee</li>
  </ul>
  <ul onmousemove="patencyRowMove(this);" onmouseout="patencyRowOut(this);" >
       <li style="width:5px"></li>
       <li style="width:15px"><img src="/images/erro.gif" width="14" height="14" align="absmiddle" border="0"></li>
       <li style="width:128px">ffffffff</li>
  </ul>
  <ul onmousemove="patencyRowMove(this);" onmouseout="patencyRowOut(this);">
       <li style="width:5px"></li>
       <li style="width:15px"><img src="/images/help.gif" width="13" height="13" align="absmiddle" border="0"></li>
       <li style="width:128px">gggggggg</li>
  </ul>
</div>
</body>
</html>请路过的网友帮忙看看、具体是什么原因！！！等待解答