IE和火狐的一些区别------解决兼容问题

来源：互联网发布：网络钓鱼常用的手段是编辑：程序博客网时间：2024/05/19 04:07

最好都是能使用w3c的标准l来进行代码编写

这是ie 和ff 页面加载完后执行的事件 innerText在ff里没有这个属性，对应的属性是textContent 下面是判断是否是IE if(navigator.appName.indexOf("Explorer") > -1) document.getElementById("xx").innerText = "xxxxxx"; else document.getElementById("xx").textContent = "xxxxxx"; 用innerHTML可以兼容 1、用id或者name来命名网页元素，用document.getElementByIdx或document.getElementsByName来获取元素对象，但是建议用id，因为在IE中document.getElementsByName("test")获取的是id="test"的对象。 2、对于document.all，看有的建议用document.all来解决，不过这个依然在FF中报错，最好还是用上述方法。 3、innerText只存在于IE中，用innerHTML代替 4、IE中事件对象event，FF中evnt 1) 获取触发事件作用对象IE中用event.srcElement,FF中用event.target 但是event在FF中只能在事件的发生现在使用，所以一般通过event参数来解决这个问题例如< input onclick="getEvent(event)" ... /> < script type="text/javscript"> function getEvent(event){ var obj=event.srcElement?event.srcElement:event.target } < /script > 2)event.x＆event.y只存在于IE中，而相等效的event.pageX，event.pageY只存在于FF中，解决方法有两种 a，用event.clientX＆event.cilentY来代替，在有滚动条时与上面有一点区别，但是绝大多数情况下两者一直。 b，event.x?event.x:event.pageX ，event.y?event.y:event.pageY来实现 5、document.formName.item("itemName")只能在IE中运行不能在FF中运行，所以，用document.formName.elements["elmentName"] IE中可以用()来包含集合类对象的名字来获取对象，FF不可以，需要用[]代替 document.forms("formName") 改成 document.forms["fromName"] document.getElementByIdx("id")(sum) 改成 document.getElementByIdx("id")[sum] 6、childNodes在FF＆IE中的区别： test 在IE中nav 的childNodes=2,且childNodes[0].nodue=test 在FF中nav的childNodes=3,且childNodes[1].nodue=test 7、依据参数获取form对象要想获取form的对象不能下面这种方式获得： function test(formName){document.formName.inputName.value="test"} 而是这样获得 function test(formName){document.forms[formName].elements["inputName"].value="test"} 8、用setAttribute加事件属性 IE：document.getElementByIdx("test").setAttribute("onclick",function(){alert("test")}) FF：document.getElementByIdx("test").setAttribute("onclick","alert(/"test/")") 9、sibling FF中用nextSiling、previousSiling、parentNode.lastChild等获取相邻的标签对象，两个相邻的标签之间不能有空隙或者换行，IE中某些情况下可以比如parent.nextSibling；某些情况下不可以，比如nextSibling,所以最好的方法是在利用节点树型关系获取标签对象的时候，为了避免错误应该标签＆标签之间没有空格＆换行。本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/mubingyun/archive/2010/10/23/5961044.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#tipDiv{
position:absolute;
left:512px;
top:582px;
width:191px;
height:91px;
z-index:3;
display:none;
background-color: #FF9933;
}
#tipLayer {
position:absolute;
width:167px;
height:94px;
left:50px;
top:50px;
z-index:1;
background-color: #33FF99;
border:solid;
border-width:thin;
padding:10px;
border-color:a;
width:300px;
height:200px;

}

#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 132px;
top: 36px;
}
</style>

var removeTime;

</script>
</head>

<body>
<div id="Layer1">
<div align="center" >sdsdsdsd</div>
</div>

<div style="left:200px; top:200; background-color:#CC3399; background-color:#66CC99; border:#000066; border:solid; border-width:thin; border:#336633; padding:1px">xxxxxxxxxxxxxxxxxxxxx</div>