1.HTML对象获取问题
FireFox ：document.getElementByld('idName');
ie：document.idname或者document.getElementByld('idName');
解决办法：统一使用document.getElementByld('idName');
2.const问题
说明：Firefox下，可以使用const关键字或var 关键字来定义常量；
IE下：只能使用var关键字来定义常量。
解决方法：统一使用var关键字来定义常量
3.event.x与event.y问题
说明：IE下，event对象有x,y属性，但是没有pageX,pageY属性；
Firfox下，event对象有pageX,pageY属性，但没有x,y属性；
解决办法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
4.window.location.href问题
说明：IE或者Firefox2.0下，可以使用window.location或者window.location.href;
Firefox1.5x下，只能使用window.location.
解决方法：使用window.location来代替window.location.href.
5.frame问题
以下面的frame为例：
<frame src='xxx.html' id='frameId' name='frameName' />
(1)访问frame对象
IE：使用window.frameId或者window.frameName来访问这个frame对象，frameId和frameName可以同名。
Firefox：只能使用window.frameName来访问这个frame对象。
另外，在IE和Firefox中都可以使用window.document.getElementById('frameId')来访问这个frame对象。
(2)切换frame内容：
在IE和Firefox中都可以使用window.document.getElementById('testFrame').src = 'xxx.html'或window.frameName.location = 'xxx.html'来切换frame的内容。
如果需要将frame中的参数传回父窗口（注意不是opener,而是parent frame）,可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value = 'Aqing';
6.模态和非模态窗口问题
说明：IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；Firefox下则不能.
解决方法：直接使用window.open(pageURL,name,paramenters)
方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。
例如：var parWin = window.opener; parWin.document.getElementById('Aqing').value = 'Aqing';
7.fiefox与IE的父元素（parentElement）的区别
IE:obj.parentElement
firefox:obj.parentNode
解决方法：因为firefox与IE都支持DOM，因此使用obj.parentNode是不错的选择。
8.document.formName.item(itemName)问题
问题说明：IE下，可以使用document.formName.item('itemName')或者document.formName.elements['elementName'];Firefox下，只能使用document.formName.elements['elementName'].
解决方法：统一使用document.formName.elements['elementName'].
9.集合类对象问题
问题说明：IE下，可以使用（）或[] 获取集合类的对象；Firefox下，只能使用[ ] 获取集合对象。
解决方法：统一使用[] 获取集合类的对象。
10.自定义属性问题
问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。
解决方法：统一通过getAttribute()获取自定义属性。
11.input,type 属性问题
问题说明:IE下input.type属性为只读；但是Firefox下input.type属性为读写。
解决办法：不修改input.type属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素
12.event.srcElement问题
问题说明：IE下，event对象有srcElement属性，但是没有target属性；Firefox下，event对象有target属性，但是没有srcElement属性。
解决方法：使用srcObj = event.srcElement ? event.srcElement:event.target;如果考虑第八条问题，就改用myEvent代替event即可。
13.body载入问题
问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在。而IE的body的对象则必须在body标签被浏览器完全读入之后才存在。
【注】这个问题尚未实际验证，待验证后再修改。
【注】经验证，IE6，Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。
14，事件委托方法
问题说明：IE下，使用document.body.onload = inject;其中function.inject()在这个之前已被实现；在Firefox下，使用document.body.onload = inject();
解决方法：统一使用document.body.onload = new Function('inject()');或者document.body.onload = function()
{}
【注意】Function和funtion的区别。
15.Table操作问题
问题说明：ie，firefox以及其他浏览器对于table标签的操作都各不相同，在ie中不允许对table和tr的innerHtml赋值，使用js增加一个tr时，使用appendChild方法也不管用。
解决方法：//向table追加一个空行；
var row = otable.insertRow(-1); var cell = document.createElement('td');cell.innerHTML = "";cell.className = "XXX";row.appendChild(cell);[注]由于我很少使用JS直接操作表格，这个问题没有遇到过，建议使用JS框架集来操作table,如JQuery。
16，对象宽高赋值问题
问题说明：FireFox中类似obj.style.height = imgObj.height的语句无效。
CSS
16.cursor:hand VS cursor:pointer;
firefox 不支持hand，但ie支持pointer
解决方法：统一使用pointer
17.innerText 在IE中能正常工作，但在FireFox中却不行
需用textContent.
解决方法：
if(navigator.appName.indexOf('Explorer') > 1){
document.getElementById('element').innerText = "my text";
}else{
document.getElemenetById(element).textContent = "my text";
}
18.CSS透明
IE:filter:progid:DXImage Transform.Microsoft.Alpha(style=0,opacity = 60);
FF:opacity:0.6.
opacity 透明，子元素会继承透明属性。解决方式：1，使用background:rgba(0,0,0,6)//IE8及以下无效果。2，使用定位，背景色与子元素处于同级关系。
19.css中的width和padding
在IE7和FF中的width 宽度不包括padding,在ie6中包括padding
20.FF和IEBOX模型解释不一致导致相差2px
box.style{width:100;border:1px;}
ie理解为box.width = 100
ff理解为box.width = 100+1*2 = 102 //加上边框2px
解决方法：div{margin :30 !important;margin:28px；}
注意着两个margin的顺序一定不能写反，IE不能识别！important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
21.IE5和IE6的BOX解释不一致导致相差2px
box.style{width:100;border:1px}
ie理解为box.width = 100 ff理解为box.width = 100 + 1*2 = 102
解决方法：div{margin:30px!important;margin:28px}注意着两个margin的顺序一定不能写反。IE不能识别！important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{margin:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xxpx !important;
21.IE5和IE6的BOX解释不一致
IE5下div{width:300px;margin:0 10px 0 10px} div的宽度会被解释为300px-10px(左填充)-10px(右填充)，最终div宽度为280px,而在IE6和其他浏览器上的宽度则是300px+10px
网友评论