yangsp1
- 浏览: 48839 次
- 性别:
- 来自: 北京
-
最新评论
-
yangsp1：
jimichan 写道 很好，总结的不错，加油谢谢。
JavaScript prototype整理（网上的三种理解） -
jimichan：
很好，总结的不错，加油
JavaScript prototype整理（网上的三种理解） -
lddzmy：
还需要说明一点，对于二、e.x,y中的情况三，此时x,y的(0 ...
javascript的一些坐标位置属性2 -
lddzmy：
:cry: 唉，是我理解错了。我做了一组测试，发现了如下的规律 ...
javascript的一些坐标位置属性2 -
lddzmy：
我怎么感觉layerX和offsetX是一个效果呢。
javascript的一些坐标位置属性2
转自：http://blog.csdn.net/lenotang/archive/2008/10/18/3096627.aspx
要写出在各大主流浏览器上都兼容的JS代码，就要关注他们的区别，下是IE和FF综合考虑的通用DOM！
1.document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或 document.formName.elements["elementName"];Firefox下,只能使用 document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
2.集合类对象问题
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
3.自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
4.eval("idName")问题
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.
5.变量名与某HTML对象ID相同的问题
说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
6.const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
7.input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
8.window.event问题
说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.
解决方法:
IE:
<input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/>
...
<script language="javascript">
function gotoSubmit8_1() {
...
alert(window.event); //use window.event
...
}
</script>
IE&Firefox:
<input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/>
...
<script language="javascript">
function gotoSubmit8_2(evt) {
...
evt=evt?evt:(window.event?window.event:null);
alert(evt); //use evt
...
}
</script>
9.event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
10.event.srcElement问题
说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
11.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
12.模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
13.frame问题
以下面的frame为例：
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
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中的参数传回父窗口，可以在frme中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";
14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如：
Firefox：
<body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox：
<body>
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>
15. 事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
Firefox：document.body.onload = inject();
有人说标准是：
document.body.onload=new Function('inject()');
16. firefox与IE(parentElement)的父元素的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
17.cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer
18.innerText在IE中能正常工作，但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
19. FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
obj.style.height = imgObj.height + 'px';
20. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
21. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效
23. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
24. CSS圆角
IE：不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;。
25. CSS双线凹凸边框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
以下以 IE 代替 Internet Explorer，以 MF或FF代替 Mozzila Firefox
1：innerText
IE支持，FIREFOX不支持
解决办法：用innerHTML,2种浏览器都识别innerHTML
2：document.createElement
document.appendChild
在往表里插入行时
FIREFOX支持，IE不支持
解决办法：把行插入到TBODY中，不要直接插入到表
3：setAttribute('style','color:red;')
FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持
解决办法：不用setAttribute('style','color:red')
而用object.style.cssText = 'color:red;'(这写法也有例外)
最好的办法是上面种方法都用上，万无一失 ^_^
4:class
setAttribute('class','styleClass')
FIREFOX支持，IE不支持(指定属性名为CLASS，IE不会设置元素的CLASS属性，相反只使用SETATTRIBUTE时IE自动识别CLASSNAME属性)
解决办法：
setAttribute('class','styleClass')
setAttribute('className','styleClass')
2种都用上（注：IE和FF都支持object.className）
5:用setAttribute设置事件
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();');
FIREFOX支持，IE不支持
解决办法：
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下：
var obj = document.getElementById('objId');
obj.onclick=function(){fucntionname();};
这种方法所有浏览器都支持
6：建立单选钮
IE以外的浏览器
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');
IE:
var rdo =document.createElement("<input type='radio' name='radiobtn' value='checked'>");
解决办法：
这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了
万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。
0：共同的一些技巧
在动态建立INPUT型输入元素时，一般是先加入，在设置TYPE。这就有可能出错
好习惯：var btn = document.createElement('input');
btn.setAttribut('type','button');
document.getElementById('formId').appendChild(btn);
==================================================================================
1. document.form.item 问题
(1)现有问题：
现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行
(2)解决方法：
改用 document.formName.elements["elementName"]
(3)其它
参见 2
2. 集合类对象问题
(1)现有问题：
现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
(2)解决方法：
改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。
又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
(3)其它
3. window.event
(1)现有问题：
使用 window.event 无法在 MF 上运行
(2)解决方法：
MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在IE中运行)：
<input type="button" name="someButton" value="提交" onclick="java script:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit() {
...
alert(window.event); // use window.event
...
}
</script>
新代码(可在IE和MF中运行)：
<input type="button" name="someButton" value="提交" onclick="java script:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
</script>
此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。
4. HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用。
5. 用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。
6. 变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
(2)解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
(3)其它
参见 问题4
7. event.x 与 event.y 问题
(1)现有问题
在IE 中，event 对象有 x, y 属性，MF中没有。
(2)解决方法
在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。
如果要完全一样，可以稍麻烦些：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
(3)其它
event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。
8. 关于frame
(1)现有问题
在 IE中 可以用window.testFrame取得该frame，mf中不行
(2)解决方法
在frame的使用方面mf和ie的最主要的区别是：
如果在frame标签中书写了以下属性：
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
ie： window.top.frameId或者window.top.frameName来访问这个window对象
mf： 只能这样window.top.frameName来访问这个window对象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
以及/test/js/test_frame/目录下面的测试
9. 在mf中，自己定义的属性必须getAttribute()取得
10.在mf中没有 parentElement parement.children 而用
parentNode parentNode.childNodes
childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时，IE和MF对parentNode的解释不同，例如
<form>
<table>
<input/>
</table>
</form>
MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
11.const 问题
(1)现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
(2)解决方法:
不使用 const ，以 var 代替。
12. body 对象
MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
13. url encoding
在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的
14. nodeName 和 tagName 问题
(1)现有问题：
在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
有问题（具体情况没有测试，但我的IE已经死了好几次）。
(2)解决方法：
使用 tagName，但应检测其是否为空。
15. 元素属性
IE下 input.type属性为只读，但是MF下可以修改
16. document.getElementsByName() 和 document.all[name] 的问题
(1)现有问题：
在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。
======================================================================================================
1. 向表中追加行
这是IE和Firefox,Safari,Opera都支持的代码
var cell = documentcreateElement("td").appendChild(document.createTextNode("foo"));
var row = document.createElement("tr").appendChild(cell);
document.getElementById("MyTableBoyd").appendChild(row);
或者：在TR的父节点添加TBODY。（注：在IE中，利用DOM动态添加表格的行时，在TR的上一层必须添加TBODY，否则动态添加之后无法显示出来）
2. 通过JAVASCRIPT设置元素的样式
var spanElement = document.getElementById("myspan");
//spanElement.setAttribute("style","font-weight:bold;color:red"); //IE之外的浏览器
spanElement.style.cssText="font-weight:bold;color:red"; //IE的方法cssText不是标准属性,但得到IE支持
3. IE和FF在添加Option兼容操作，这里直接贴出本人的代码（注：FF支持直接将Option列表以innerHTML形式嵌入到select节点，但IE不支持）
function removeAllOptions(select_id){
var com=document.getElementById(select_id);
var len=com.options.length;
for(var i=0;i<len;i++){
com.remove(0);
}
}
function addOption(e_select,value,text){
var oOption = document.createElement("option");
e_select.options.add(oOption);
if(text!=null){
var text_node=document.createTextNode(text);
oOption.appendChild(text_node);
}
if(value!=null){
oOption.value = value;
}
}
4. 创建输入元素(通用代码)
var button = document.createElement("input");
button.setAttribute("type","button");
document.getElementById("form").appendChild(button);
5. 向输入元素增加事件处理程序(通用代码)
var element = document.getElementById("ee");
element.onclick=function(){todo();};
6. 创建单选按钮
var ration = document.createElement("<input type='radio' name='radionsss' value='checked'>”);//ie
//非ie创建方法
vat radion = document.createElement("input");
radion .setAttribute("type","radio");
radion.setAttribute("name","radionsss");
radion.setAttribute("value","checked");
要写出在各大主流浏览器上都兼容的JS代码，就要关注他们的区别，下是IE和FF综合考虑的通用DOM！
1.document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或 document.formName.elements["elementName"];Firefox下,只能使用 document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
2.集合类对象问题
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
3.自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
4.eval("idName")问题
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.
5.变量名与某HTML对象ID相同的问题
说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
6.const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
7.input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
8.window.event问题
说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.
解决方法:
IE:
<input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/>
...
<script language="javascript">
function gotoSubmit8_1() {
...
alert(window.event); //use window.event
...
}
</script>
IE&Firefox:
<input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/>
...
<script language="javascript">
function gotoSubmit8_2(evt) {
...
evt=evt?evt:(window.event?window.event:null);
alert(evt); //use evt
...
}
</script>
9.event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
10.event.srcElement问题
说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
11.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
12.模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
13.frame问题
以下面的frame为例：
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
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中的参数传回父窗口，可以在frme中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";
14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如：
Firefox：
<body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox：
<body>
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>
15. 事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
Firefox：document.body.onload = inject();
有人说标准是：
document.body.onload=new Function('inject()');
16. firefox与IE(parentElement)的父元素的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
17.cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer
18.innerText在IE中能正常工作，但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
19. FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
obj.style.height = imgObj.height + 'px';
20. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
21. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效
23. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
24. CSS圆角
IE：不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;。
25. CSS双线凹凸边框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
以下以 IE 代替 Internet Explorer，以 MF或FF代替 Mozzila Firefox
1：innerText
IE支持，FIREFOX不支持
解决办法：用innerHTML,2种浏览器都识别innerHTML
2：document.createElement
document.appendChild
在往表里插入行时
FIREFOX支持，IE不支持
解决办法：把行插入到TBODY中，不要直接插入到表
3：setAttribute('style','color:red;')
FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持
解决办法：不用setAttribute('style','color:red')
而用object.style.cssText = 'color:red;'(这写法也有例外)
最好的办法是上面种方法都用上，万无一失 ^_^
4:class
setAttribute('class','styleClass')
FIREFOX支持，IE不支持(指定属性名为CLASS，IE不会设置元素的CLASS属性，相反只使用SETATTRIBUTE时IE自动识别CLASSNAME属性)
解决办法：
setAttribute('class','styleClass')
setAttribute('className','styleClass')
2种都用上（注：IE和FF都支持object.className）
5:用setAttribute设置事件
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();');
FIREFOX支持，IE不支持
解决办法：
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下：
var obj = document.getElementById('objId');
obj.onclick=function(){fucntionname();};
这种方法所有浏览器都支持
6：建立单选钮
IE以外的浏览器
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');
IE:
var rdo =document.createElement("<input type='radio' name='radiobtn' value='checked'>");
解决办法：
这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了
万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。
0：共同的一些技巧
在动态建立INPUT型输入元素时，一般是先加入，在设置TYPE。这就有可能出错
好习惯：var btn = document.createElement('input');
btn.setAttribut('type','button');
document.getElementById('formId').appendChild(btn);
==================================================================================
1. document.form.item 问题
(1)现有问题：
现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行
(2)解决方法：
改用 document.formName.elements["elementName"]
(3)其它
参见 2
2. 集合类对象问题
(1)现有问题：
现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
(2)解决方法：
改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。
又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
(3)其它
3. window.event
(1)现有问题：
使用 window.event 无法在 MF 上运行
(2)解决方法：
MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在IE中运行)：
<input type="button" name="someButton" value="提交" onclick="java script:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit() {
...
alert(window.event); // use window.event
...
}
</script>
新代码(可在IE和MF中运行)：
<input type="button" name="someButton" value="提交" onclick="java script:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
</script>
此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。
4. HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用。
5. 用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。
6. 变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
(2)解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
(3)其它
参见 问题4
7. event.x 与 event.y 问题
(1)现有问题
在IE 中，event 对象有 x, y 属性，MF中没有。
(2)解决方法
在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。
如果要完全一样，可以稍麻烦些：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
(3)其它
event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。
8. 关于frame
(1)现有问题
在 IE中 可以用window.testFrame取得该frame，mf中不行
(2)解决方法
在frame的使用方面mf和ie的最主要的区别是：
如果在frame标签中书写了以下属性：
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
ie： window.top.frameId或者window.top.frameName来访问这个window对象
mf： 只能这样window.top.frameName来访问这个window对象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
以及/test/js/test_frame/目录下面的测试
9. 在mf中，自己定义的属性必须getAttribute()取得
10.在mf中没有 parentElement parement.children 而用
parentNode parentNode.childNodes
childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时，IE和MF对parentNode的解释不同，例如
<form>
<table>
<input/>
</table>
</form>
MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
11.const 问题
(1)现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
(2)解决方法:
不使用 const ，以 var 代替。
12. body 对象
MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
13. url encoding
在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的
14. nodeName 和 tagName 问题
(1)现有问题：
在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
有问题（具体情况没有测试，但我的IE已经死了好几次）。
(2)解决方法：
使用 tagName，但应检测其是否为空。
15. 元素属性
IE下 input.type属性为只读，但是MF下可以修改
16. document.getElementsByName() 和 document.all[name] 的问题
(1)现有问题：
在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。
======================================================================================================
1. 向表中追加行
这是IE和Firefox,Safari,Opera都支持的代码
var cell = documentcreateElement("td").appendChild(document.createTextNode("foo"));
var row = document.createElement("tr").appendChild(cell);
document.getElementById("MyTableBoyd").appendChild(row);
或者：在TR的父节点添加TBODY。（注：在IE中，利用DOM动态添加表格的行时，在TR的上一层必须添加TBODY，否则动态添加之后无法显示出来）
2. 通过JAVASCRIPT设置元素的样式
var spanElement = document.getElementById("myspan");
//spanElement.setAttribute("style","font-weight:bold;color:red"); //IE之外的浏览器
spanElement.style.cssText="font-weight:bold;color:red"; //IE的方法cssText不是标准属性,但得到IE支持
3. IE和FF在添加Option兼容操作，这里直接贴出本人的代码（注：FF支持直接将Option列表以innerHTML形式嵌入到select节点，但IE不支持）
function removeAllOptions(select_id){
var com=document.getElementById(select_id);
var len=com.options.length;
for(var i=0;i<len;i++){
com.remove(0);
}
}
function addOption(e_select,value,text){
var oOption = document.createElement("option");
e_select.options.add(oOption);
if(text!=null){
var text_node=document.createTextNode(text);
oOption.appendChild(text_node);
}
if(value!=null){
oOption.value = value;
}
}
4. 创建输入元素(通用代码)
var button = document.createElement("input");
button.setAttribute("type","button");
document.getElementById("form").appendChild(button);
5. 向输入元素增加事件处理程序(通用代码)
var element = document.getElementById("ee");
element.onclick=function(){todo();};
6. 创建单选按钮
var ration = document.createElement("<input type='radio' name='radionsss' value='checked'>”);//ie
//非ie创建方法
vat radion = document.createElement("input");
radion .setAttribute("type","radio");
radion.setAttribute("name","radionsss");
radion.setAttribute("value","checked");
分享到：
发表评论
-
JavaScript prototype整理（网上的三种理解）
2009-10-21 18:55 14010prototype属性，只有functio ... -
JavaScript 拖放效果系列6——修复错误
2009-10-15 09:58 1655原文来自：http://www.cainiao8.com/we ... -
JavaScript 拖放效果系列五——性能优化
2009-10-15 09:56 2723原文来自：http://www.cainiao8.com/we ... -
JavaScript 拖放效果系列四——获得元素的位置
2009-10-15 09:48 1871原文来自：http://www.cainiao8.com/we ... -
JavaScript 拖放效果系列三——解决快速拖拽的问题
2009-10-15 09:38 4550原文来自：http://www.caini ... -
JavaScript 拖放效果系列二——多元素、分离JS
2009-10-15 09:30 2220原文来自：http://www.cainiao8.com/we ... -
JavaScript 拖放效果系列一
2009-10-15 09:24 2568原文来自：http://www.cainiao8.com/we ... -
谈谈Javascript的this指针
2009-08-10 10:55 1587转自：http://developer.51cto.com/a ... -
javascript事件处理机制——容易被我们遗忘的细节问题
2009-08-06 13:56 1118转自：http://www.iteye.com/topic/2 ... -
Javascript在IE和Firefox中的区别
2009-08-05 17:22 1060版权声明：转载时请以 ... -
什么是DOM?DOM和JavaScript的关系 - [web开发]
2009-08-05 17:14 1387版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声 ... -
转自：（邂逅思维）发现几处IE与firefox的js和css几处不同点
2009-08-05 16:12 1063转自：http://bbs.blueidea.co ... -
JavaScript 页面 宽度 、高度 (一)
2009-08-05 14:15 1790转自：http://kanglecjr.iteye.com/b ... -
JavaScript 拖放效果
2009-08-05 11:03 904转自：http://www.iteye.com/topic/2 ... -
javascript的一些坐标位置属性2
2009-08-05 10:28 2128screenX:鼠标在显示屏幕上的坐标。 clientX:鼠 ... -
javascript的一些坐标位置属性
2009-08-05 10:26 1275参考另一：http://www.cnblogs.com/rai ...
相关推荐
本文将详细总结并分析IE与Firefox在CSS、DOM操作等方面的兼容性问题，并提供相应的解决方案。 #### 二、关键兼容性问题及解决方案 1. **表单元素的访问方式** - **问题描述**：在IE中，可以通过`document.form...
虽然现代浏览器倾向于使用更通用的开发者工具，如Chrome DevTools或Firefox Developer Tools，但了解IE的DOM查看器对于支持旧版本IE的项目仍然至关重要。 **压缩包子文件的文件名称列表** 这些文件名代表了可能在...
本文将深入探讨DOM文档在不同浏览器，特别是IE（Internet Explorer）和Firefox之间的差异，并结合JavaScript的常见操作来阐述如何处理这些兼容性问题。 首先，DOM是一种标准，它提供了一种统一的方式来表示和操作...
### js在IE和Firefox不同之处 在Web开发中，JavaScript（简称JS）是实现网页交互性的核心语言之一。然而，由于不同的浏览器对于JS标准的支持程度有所差异，这往往会导致跨浏览器兼容性问题的出现。IE（Internet ...
由于IE和Firefox在事件对象的获取上有差异，我们需要编写一段通用的代码来适应这两种情况。以下是一段示例代码： ```javascript function test(event) { var event = event || window.event; // doSomething } ``...
解决JavaScript在IE与Firefox之间的兼容性问题，关键在于深入了解两者的差异，并采用标准且通用的编码实践。通过使用W3C推荐的标准API，如`getElementById`、`querySelector`等，以及编写健壮的事件处理器，开发者...
- **使用`document.formName.elements["elementName"]`**：这是一种更通用且符合W3C标准的方法，同时在IE和Firefox中都得到良好支持。 #### 2. 数组操作 - **在使用数组时需注意**：在处理如`document.forms["form...
以上只是部分常见的IE与Firefox之间JavaScript的差异，实际开发中可能会遇到更多问题，如CSS样式解析、定时器行为、DOM操作等。为了确保跨浏览器兼容性，开发者应遵循W3C标准，使用像jQuery这样的库，或者使用Babel...
JavaScript在Firefox和IE之间的兼容性问题一直是前端开发者面临的一大挑战。由于这两个浏览器内核的不同，导致在处理某些JavaScript特性时存在差异。以下是一些常见的兼容性问题及其解决方案： 1. **Document.form....
1. DOM方法：例如，IE支持 `element.attachEvent('event', handler)`，而Firefox支持 `element.addEventListener('event', handler, false)`。可以编写一个通用函数来处理事件绑定： ```javascript function ...
在Web开发中，JavaScript的兼容性是至关重要的，尤其是在IE（Internet Explorer）和Firefox这两个浏览器之间。由于它们对JavaScript的实现存在显著差异，开发者需要掌握这些差异并采取适当的兼容处理措施。以下是...
综上所述，Firefox与IE在JavaScript的兼容性方面存在着诸多差异，这些差异主要体现在事件处理、DOM操作、CSS样式以及网络请求等方面。为了确保Web应用在不同浏览器上的正常运行，开发者需要充分了解这些差异，并采取...
由于各个浏览器对JavaScript的支持程度和实现方式有所差异，所以需要采取特定的策略来处理这些差异，以确保代码在Internet Explorer（IE）和Mozilla Firefox（FF）等浏览器上都能正常运行。以下是针对IE和FF兼容性...
FireFox 中遍历 DOM 文档：在FireFox中，可以使用与IE中通用的方法来遍历DOM文档。 FireFox 中处理错误：在FireFox中，可以使用parseError对象来输出错误信息，该对象会替换出错的xml文档。 ```javascript if...
在Web开发中，IE（Internet Explorer）和Firefox作为两种主流的浏览器，它们在处理JavaScript事件时存在一些显著的差异。事件处理是JavaScript交互性的重要组成部分，理解和掌握这些差异对于跨浏览器的开发至关重要...
IE浏览器使用了自己特有的事件处理方式，而Firefox遵循了更为通用的DOM标准。本文将详细解析如何在IE和Firefox浏览器中同时获取键盘事件的keyCode值。 ### IE和Firefox在键盘事件处理上的差异 IE浏览器使用window....
通过对IE与Firefox在事件处理、元素属性、DOM操作以及CSS样式等方面的不同之处进行详细分析，我们可以发现，尽管这两种浏览器在很多方面都有所差异，但还是存在一些共通的解决方案。对于开发者来说，掌握这些基本的...
这个"通用可拖动层示例兼容火狐，IE"就是一个针对不同浏览器，尤其是火狐（Firefox）和IE（Internet Explorer）实现的可拖动层解决方案。 首先，我们来看"可移动层示例.html"，这是一个HTML文件，其中包含了用于...
然而，在实际应用中，不同的浏览器表现出了不同的行为，尤其是在IE、Firefox和Chrome之间。 ### 浏览器差异 #### 火狐（Firefox） 在火狐浏览器中，通常情况下`document.body.scrollTop`和`document....
对于IE（Internet Explorer）和Firefox，这两种主流浏览器对JavaScript的支持有时会有差异，这给开发者带来了挑战。以下是关于IE和Firefox下JavaScript兼容写法的一些关键点： 1. **ID属性与Name属性**：在IE中，`...