IE与Mozilla下Dhtml的一些区别小结

[fason]

近来问的人很多，也是好事，这里我就发表一下个人的一些总结，细节还是要大家去试一试,才会理解

1.DOM上的接口基本上还是一致的，但经测试发现mozilla下的DOM更标准些,就算些法一样，IE下会有一些微小的区别，但无关要紧

2.事件模型上，这方面区别算比较大.
mozilla下的e.target 相当于 ie下的event.srcElement,但细节上有区别，后者是返回一个html element
而e.target返回的是个节点，也就是说包括文本节点，方法可以这样
var trg = e.target;
while(trg.nodeType!=1)trg=trg.parentNode;

mozilla下的e.which与ie下的event.keyCode相当

相对应的还有e.layerX,e.layerY,e.pageX,e.pageY...
可以看看http://fason.nease.net/mozilla/dom/ event部份

事件绑定上mozilla用addEventListener,removeEventListener,对应ie的attachEvent,detatchEvent

3.对象引用上就直接document.getElementById就行了，如果还要兼容ie4,可以再加上document.all判断
form element的引用要标准些var oInput = document.formName.elements["input1"]

4.XML的应用上区别更大些，因为IE下是通过activex来创建，而mozilla已经是有这些对象的（需要dom2支持）
Xmldomdocument: var doc = document.inplementation.createDocument("","",null)
xmlhttp: var req = new XMLHttpRequest()

5.innerText就在mozilla不支持了，需要用些range的技巧来取得它的text

6.insertAdjacentHTML是个比较好用的方法，mozilla可以用DOM的方法insertBefore来兼容

7.更细微的，如Array,Date的一些方法ie和mozilla也会有一些微小的区别，具体不提到了。。。

说到这里，主要用到会碰到的问题基本上在这里说一说,如果有补充也在这贴子说一说，加入FAQ或精华贴

[ttyp]

ie中如果指定了name属性getElementById可以仍然可以获得该对象，
firefox中如不指定id属性只有name属性，用getElementById是会报undefined错的，看来如果要兼容浏览器尽量的id和name都写上，.net的服务端控件就都加上了

[超级大笨狼]

firefox
好像不支持
window.status ="您已经选了" + totalSelect + "个问题";

[Aaronlau]

好贴，收藏了，谢谢！

我也问个问题：
实现框架的隐藏与显示
在mozilla中为什么这样写不起作用，有什么解决办法？
top.document.getElementById('frm').cols='120,*'；
top.document.getElementById('frm').cols='*'

[是是非非]

学习

[fason]

to ttyp:只用id不就行了？

to superdullwolf: Netscape 和 Mozilla可以

[chjpeng]

做个记号~~

[bletao]

up

[ttyp]

to fason(咖啡人生) :
一般控件用id没啥问题，对于iframe,checkbox,radio等还是都加上好

[zksandy7]

楼主，Fire fox装过插件后就可以用ActiveX控件了吗？是需要用GeckoActiveXObject 代替 ActiveXObject吗？

[qingyun1020]

偶尔来这里，学习来的
看来以后的常来的呀

[rootcn]

firefox
好像不支持
window.status ="您已经选了" + totalSelect + "个问题";

-------------------

需要设置才行, 默认是不允许的.

在 firefox 下.
工具 / 选项 / 网页特性 / 启用 javascript, 高级 / 修改状态栏文本

[rootcn]

显示上的一点小区别:

<div style="position: absolute; top: 0px; left: 0px; border-width: 10px; border-style: solid; border-color: #0000FF; width: 100px; height: 100px;" id="test">
test
<input type="button" value="view" onclick="alert(test.clientWidth)"/>
</div>

在 IE 下, 边框包含在设定的宽度内, 即包括容区的宽度为 80px, 总宽度为 100 px;
在 firefox 下, 边框没有被包含在设定的宽度内, 即内容区宽度为 100px, 总宽度为 120px;

[shenlang]

IE中的DIV元素的style有overflow-x, overflow-y属性，Mozilla中只有overflow了，如果我只想在纵向出现滚动条，应该怎么设置？

[webfactory]

听说微软的IE市场份额越来越少，看来日后B/S的工作越来越难做了

[fason]

to rootcn:这就是盒模型的区别

[viyar]

这段代码在IE上没有任何问题，但是在linux下的mozilla或者firefox中，文本框没有办法输入，可以说是无法获得键盘焦点，请问这段代码有什么地方不妥？

<td width='18%'>
<div class='text-content'>
<input type='text' name='_text_1' value="100" class='textfield'
style='background-color:#fff'>
</div>
<div class='progress-container'>
<div class='progress-content'>
<img src='/img_eng/Common/1x1tp.gif' width='1' height='1' border='0'>
</div>
</div>
</td>

.text-content { font-family: Arial, Helvetica, "·s²Ó©úÅé", "²Ó©úÅé", "MS Song", sans-serif; font-size: 12px; font-weight: bold; color: #000000; }

.progress-container { position: relative; border: 1px silver solid; height: 5px; cursor: hand; }

.progress-content { font-family: Arial, Helvetica, "·s²Ó©úÅé", "²Ó©úÅé", "MS Song", sans-serif; position: absolute; left: 0px; top: 0px; height: 3px; width: 1px; background-color: #0098E8; }

[viyar]

这个帖子就这样销声匿迹了吗？咖啡 please help me

[soft_2008]

--\ mark /--

[三杯倒]

up

[red-fly]

mozilla真是差劲