如何编写跨浏览器的javascript？

ie跟ff兼容需要慢慢积累你可以去google看下浏览器兼容性的文章

跨瀏覽器其實就是做所有瀏覽器都支持的部分，也就是要跟隨它們都遵循的標準，DOM,CSS,EcmaScript

有没有什么好用的库，可以屏蔽各种浏览器细节的，prototype.js怎么样？

浏览器的兼容很复杂，可以去看看 x 库，Ajax in Action 一书推荐的。http://www.cross-browser.com/这里是说明和源代码：http://www.cross-browser.com/x/lib/

如果闲麻烦的话可以考虑下用jQuery、prototyp、Ext之类的框架

dojo jquery ext 好像也不是完全跨浏览器吧。

JQuery貌似解决了浏览器的兼容问题

特效还牵扯到CSS哦
JS的兼容：http://blog.csdn.net/chinmo/archive/2008/04/09/2267945.aspx我博客里还有部分CSS兼容的

这段代码只在ie有效，要改成兼容ff，大概要改哪些地方？谢谢!<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style><script language="javascript" defer="defer">
//定义二维坐标
function Point(iX, iY){
this.x = iX;
this.y = iY;
}//计算一个元素的绝对坐标
function fGetXY(aTag){
  var oTmp = aTag;
  var pt = new Point(0,0);
  do {
   pt.x += oTmp.offsetLeft;
   pt.y += oTmp.offsetTop;
   oTmp = oTmp.offsetParent;
  } while(oTmp.tagName!="BODY");
  return pt;
}//检测是否超出菜单区域
function checkOutBound(obj){
  if(obj.style.display=='none')return true;
  with (obj.style){
   var l = pixelLeft
   var t = pixelTop;
   var r = l + pixelWidth;
   var b = t + pixelHeight;
return (event.clientX>r)||(event.clientX<l)||(event.clientY>b)||(event.clientY<t);
  }
}
////////////////////////////////////////////////////////////定义菜单对象
function Menu(divID,parentItemID,isRoot)
{
this.timeout = null;
this.length = null;

this.parentMenu = null
this.parentItem = null;
this.div = null;
this.content = null;
this.moving = false;
this.children = [];
this.activeChild = null;
this.slideDirection = 'right';

this.mouseOverCSSClass = null;
this.mouseOutCSSClass = null; {
this.div = document.getElementById(divID);
this.div.menu = this;

this.content = this.div.childNodes[0];
this.parentItem = document.getElementById(parentItemID);

if( !isRoot )
{
this.parentMenu = this.parentItem.parentNode.parentNode.parentNode.parentNode.parentNode.menu;
this.parentMenu.children[this.parentMenu.children.length] = this;
this.slideDirection = this.parentMenu.slideDirection;
} var tr = this.content.childNodes[0].childNodes[0].childNodes;
for(var i=0;i<tr.length;i++)
{
var td = tr[i].childNodes[0];
td.attachEvent('onmouseover',
function(obj)
{
return function(){obj.style.backgroundColor='#999999';}
}(td)
);
td.attachEvent('onmouseout',
function(obj)
{
return function(){obj.style.backgroundColor='';}
}(td)
);
}

if(!isRoot)
{
this.parentItem.attachEvent('onmouseover',
function(obj)
{
return function()
{
obj.parentMenu.activeChild = obj;
slideOut(obj);
}
}(this)
);
this.parentItem.attachEvent('onmouseout',
function(obj)
{
return function()
{
if(checkOutBound(obj.div))slideIn(obj);
}
}(this)
);
}
else
{
this.parentItem.attachEvent('onmouseover',
function(obj)
{
return function()
{
slideDownOut(obj);
}
}(this)
);
this.parentItem.attachEvent('onmouseout',
function(obj)
{
return function()
{
if(checkOutBound(obj.div))slideUpIn(obj);
}
}(this)
);
}

this.div.attachEvent('onmouseleave',
function(obj)
{
return function()
{
if(checkOutBound(obj.parentItem) && (obj.activeChild==null || checkOutBound(obj.activeChild.div)) )
{
var o = obj;
while(o.parentMenu)
{
slideIn(o);
o = o.parentMenu;
if(!checkOutBound(o.div))
{
return;
}
}
slideUpIn(o);
}
}
}(this)
);
}
}
////////////////////////////////////////////////////////////划出
function slideOut(menu)
{
if(menu.parentMenu!=null && menu.parentMenu.moving==true)return;

menu.moving = true;

var point = fGetXY(menu.parentItem);
if(menu.slideDirection == 'right')
{
if( point.x + menu.parentItem.offsetWidth + parseInt(menu.div.style.width) > parseInt(document.body.clientWidth) + parseInt(document.body.leftMargin) )
{
menu.slideDirection = 'left';
slideLeftOut(menu);
}
else
{
menu.slideDirection = 'right';
slideRightOut(menu);
}
}
else if(menu.slideDirection == 'left')
{
if( point.x - parseInt(menu.div.style.width) < 0 )
{
menu.slideDirection = 'right';
slideRightOut(menu);
}
else
{
menu.slideDirection = 'left';
slideLeftOut(menu);
}
}
}
////////////////////////////////////////////////////////////划入
function slideIn(menu)
{
if(menu.slideDirection == 'left')
{
slideRightIn(menu);
}
else
{
slideLeftIn(menu);
}
}
////////////////////////////////////////////////////////////向下划出
function slideDownOut(menu)
{
if(menu.parentMenu!=null && menu.parentMenu.moving==true)return;

menu.moving = true;

function slideDownOut_(menu)
{
if(parseInt(menu.content.style.marginTop) < 0-20)
{
menu.content.style.marginTop = parseInt(menu.content.style.marginTop)+20;
menu.timeout = setTimeout(function(){slideDownOut_(menu);},50);
}
else
{
menu.content.style.marginTop = 0;
menu.length = null;
menu.moving = false;
}
} var point = fGetXY(menu.parentItem);
menu.div.style.pixelLeft = point.x;
menu.div.style.pixelTop = point.y + menu.parentItem.offsetHeight + 2;
menu.div.style.display = '';
menu.content.style.width = menu.div.style.width;
menu.content.style.height = menu.div.style.height;
menu.length = menu.div.style.pixelHeight;
if(menu.content.style.marginTop=='')menu.content.style.marginTop = -menu.length;
clearTimeout(menu.timeout);
slideDownOut_(menu);
}to be continued ...

////////////////////////////////////////////////////////////向上划入
function slideUpIn(menu)
{
function slideUpIn_(menu)
{
if(parseInt(menu.content.style.marginTop) > -menu.length+20)
{
menu.content.style.marginTop = parseInt(menu.content.style.marginTop)-20;
menu.timeout = setTimeout(function(){slideUpIn_(menu);},50);
}
else
{
menu.content.style.marginTop = -menu.length;
menu.div.style.display='none';
menu.length = null;
menu.moving = false;
}
} if(menu.div.style.display=='')
{
menu.length = menu.div.style.pixelHeight;
clearTimeout(menu.timeout);
for(var i=0;i<menu.children.length;i++)
{
slideLeftIn(menu.children[i]);
}
menu.moving = true;
slideUpIn_(menu);
}
}
////////////////////////////////////////////////////////////向右划出
function slideRightOut(menu)
{
function slideRightOut_(menu)
{
if(parseInt(menu.content.style.marginLeft) < 0-20)
{
menu.content.style.marginLeft = parseInt(menu.content.style.marginLeft)+20;
menu.timeout = setTimeout(function(){slideRightOut_(menu);},50);
}
else
{
menu.content.style.marginLeft = 0;
menu.length = null;
menu.moving = false;
}
} var point = fGetXY(menu.parentItem);
menu.div.style.pixelLeft = point.x + menu.parentItem.offsetWidth;
menu.div.style.pixelTop = point.y;
menu.div.style.display = '';
menu.content.style.width = menu.div.style.width;
menu.content.style.height = menu.div.style.height;
menu.length = parseInt(menu.div.style.width);
if(menu.content.style.marginLeft=='')menu.content.style.marginLeft = -menu.length;
clearTimeout(menu.timeout);
slideRightOut_(menu);
}
////////////////////////////////////////////////////////////向左划入
function slideLeftIn(menu)
{
function slideLeftIn_(menu)
{
if(parseInt(menu.content.style.marginLeft) > -menu.length+20)
{
menu.content.style.marginLeft = parseInt(menu.content.style.marginLeft)-20;
menu.timeout = setTimeout(function(){slideLeftIn_(menu);},50);
}
else
{
menu.content.style.marginLeft = -menu.length;
menu.content.parentNode.style.display='none';
menu.length = null;
menu.moving = false;
}
}

if(menu.div.style.display=='')
{
menu.length = parseInt(menu.div.style.width);
clearTimeout(menu.timeout);
for(var i=0;i<menu.children.length;i++)
{
slideLeftIn(menu.children[i]);
}
menu.moving = true;
slideLeftIn_(menu);
}
}
////////////////////////////////////////////////////////////向左划出
function slideLeftOut(menu)
{
function slideLeftOut_(menu)
{
if(parseInt(menu.content.style.marginLeft) > 0+20)
{
menu.content.style.marginLeft = parseInt(menu.content.style.marginLeft)-20;
menu.timeout = setTimeout(function(){slideLeftOut_(menu);},50);
}
else
{
menu.content.style.marginLeft = 0;
menu.length = null;
}
} var point = fGetXY(menu.parentItem);
menu.div.style.pixelLeft = point.x - parseInt(menu.div.style.width);
menu.div.style.pixelTop = point.y;
menu.div.style.display = '';
menu.content.style.width = menu.div.style.width;
menu.content.style.height = menu.div.style.height;
menu.length = parseInt(menu.div.style.width);
if(menu.content.style.marginLeft=='')menu.content.style.marginLeft = menu.length + menu.length;
clearTimeout(menu.timeout);
slideLeftOut_(menu);
}
////////////////////////////////////////////////////////////向右划入
function slideRightIn(menu)
{
function slideRightIn_(menu)
{
if(parseInt(menu.content.style.marginLeft) < menu.length + menu.length - 20)
{
menu.content.style.marginLeft = parseInt(menu.content.style.marginLeft)+20;
menu.timeout = setTimeout(function(){slideRightIn_(menu);},50);
}
else
{
menu.content.style.marginleft = menu.length + menu.length;
menu.div.style.display='none';
menu.length = null;
menu.moving = false;
}
}

if(menu.div.style.display=='')
{
menu.length = menu.length = parseInt(menu.div.style.width);
clearTimeout(menu.timeout);
menu.moving = true;
slideRightIn_(menu);
}
}</script><script defer="defer">
var m1 = new Menu('menu1','r1',true);
var m1_2 = new Menu('menu1_2','item1_2',false);
var m1_3 = new Menu('menu1_3','item1_3',false);
var m1_3_3 = new Menu('menu1_3_3','item1_3_3',false);
var m1_3_3_4 = new Menu('menu1_3_3_4','item1_3_3_4',false);</script>
</head><body>
<table width="400" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#0099FF">
  <tr>
    <td id="r1">菜单一</td>
    <td id="r2">菜单二</td>
    <td id="r3">菜单三</td>
    <td id="r4">菜单四</td>
  </tr>
</table><div id="menu1" style="display:none;position:absolute;overflow:hidden;width:120px;height:150px;" >
<div style="background:#cccccc; left:0px; top:0px;">
<table width="120" height="100%" border="0" cellpadding="0" cellspacing="1" class="menu_tb">
  <tr>
<td id="item1_1">子菜单一</td>
  </tr>
  <tr>
<td id="item1_2"><span style="float:left">子菜单二</span><span style="float:right">>> </span></td>
  </tr>
  <tr>
<td id="item1_3"><span style="float:left">子菜单三</span><span style="float:right">>> </span></td>
  </tr>
  <tr>
<td id="item1_4">子菜单四</td>
  </tr>
  <tr>
<td id="item1_5">子菜单五</td>
  </tr>
  <tr>
<td id="item1_6">子菜单六</td>
  </tr>
</table>
</div>
</div><div id="menu1_2" style="display:none;position:absolute;overflow:hidden;width:120px;height:75px;" >
<div style="background:#cccccc; left:0px; top:0px;">
<table width="120" height="100%" border="0" cellpadding="0" cellspacing="1" class="menu_tb">
  <tr>
<td id="item1_2_1">子菜单一</td>
  </tr>
  <tr>
<td id="item1_2_2">子菜单二</td>
  </tr>
  <tr>
<td id="item1_2_3">子菜单三</td>
  </tr>
</table>
</div>
</div><div id="menu1_3" style="display:none;position:absolute;overflow:hidden;width:120px;height:100px;" >
<div style="background:#cccccc; left:0px; top:0px;">
<table width="120" height="100%" border="0" cellpadding="0" cellspacing="1" class="menu_tb">
  <tr>
<td id="item1_3_1">子菜单一</td>
  </tr>
  <tr>
<td id="item1_3_2">子菜单二</td>
  </tr>
  <tr>
<td id="item1_3_3"><span style="float:left">子菜单三</span><span style="float:right">>> </span></td>
  </tr>
  <tr>
<td id="item1_3_4">子菜单四</td>
  </tr>
</table>
</div>
</div><div id="menu1_3_3" style="display:none;position:absolute;overflow:hidden;width:120px;height:100px;" >
<div style="background:#cccccc; left:0px; top:0px;">
<table width="120" height="100%" border="0" cellpadding="0" cellspacing="1" class="menu_tb">
  <tr>
<td id="item1_3_3_1">子菜单一</td>
  </tr>
  <tr>
<td id="item1_3_3_2">子菜单二</td>
  </tr>
  <tr>
<td id="item1_3_3_3">子菜单三</td>
  </tr>
  <tr>
<td id="item1_3_3_4"><span style="float:left">子菜单四</span><span style="float:right">>> </span></td>
  </tr>
</table>
</div>
</div><div id="menu1_3_3_4" style="display:none;position:absolute;overflow:hidden;width:120px;height:50px;" >
<div style="background:#cccccc; left:0px; top:0px;">
<table width="120" height="100%" border="0" cellpadding="0" cellspacing="1" class="menu_tb">
  <tr>
<td id="item1_3_3_4_1">子菜单一</td>
  </tr>
  <tr>
<td id="item1_3_3_4_2">子菜单二</td>
  </tr>
</table>
</div>
</div></body>
</html>

var oTmp = aTag;
  var pt = new Point(0,0);
  do {
      pt.x += oTmp.offsetLeft;
      pt.y += oTmp.offsetTop;
      oTmp = oTmp.offsetParent;
  } while(oTmp.tagName!="BODY");
  return pt;
}
这里的红色部分要改var oTmp = document.getElementById(aTag)
其他的没仔细看
稍微看了一下就看到了你这个写不兼容

调试易

如何编写跨浏览器的javascript？

解决方案 »