<转>整理FF与IE不兼容的问题
☆ js调试工具推荐 firefox 的 firebug 插件
??????? 能够给js设置断点执行
??????? 能够运行时修改css样式
??????? 查看dom模型等
?????????
??? ☆ IE8 自带的developer bar也很不错
???
?????????????
??? ☆ 打开firefox所有js警告:
??????? 在地址栏里录入:about:config
??????? 双击,设置 javascript option restict? 打开为true 能够看到很多警告,利于纠错
??? ☆ IE -> firefox javascript类
???????? △?? document.all("id")?? -> document.getElementById("id")
??????????????? 并且控件尽量用id,而不是name标识
???????????????
??????????????? 提示:
??????????????? 如果控件只有name,没有id, 用getElementById时:
??????????????????? IE:也可以找到对象
??????????????????? FF:返回NULL
???????? △?? 获得form里某个元素的方法
??????????????? elForm.elements['name'];
????????
???????? △?? 取集合元素时, ie支持? [],() 2种写法, 但是ff仅支持[],如:
??????????????? table.rows(5).cells(0)
??????????????? 改为:
??????????????? table.rows[5].cells[0]
????????????????
???????? △?? 判断对象是否是object的方法应该为
??????????????? if( typeof? 对象变量 == "object")
??????????????? 而不是 if(对象变量 == "[object]")
???????????????
???????? △???? eval(对象名称)??? ->? document.getElementById??????????????
????????????????? FF支持eval函数
?????????????????
???????? △???? 通过id直接调用对象
????????????????? 对象id.value = ""
????????????????? 改为
????????????????? document.getElementById("name").value = ""
?????????????????
???????? △???? obj.insertAdjacentElement("beforeBegin",objText);
??????????????? 改为用
??????????????? obj.parentNode.insertBefore(objText,obj);
????????????????
???????????
???????? △???? FF的createElement不支持HTML代码
????????????????? 用document.write(esHTML);
?????????????????
????????????????? 或者创建元素后再设置属性, 对input元素来说,需要先设置type再加入到dom里
????????????????? var ōbj = createElement("input");
????????????????? obj.type = "checkbox";
?????????????????
????????????????? var obj2 = document.getElementById("id2");
????????????????? obj2.parentNode.insertBefore(obj,obj2);
?????????????????
??????????????? 如果是直接插入html代码,则可以考虑用
??????????????????? createContextualFragment
?????????????????????
?????????????????
???????? △???? innerText -> textContent
????????
???????? △???? 对象名称中的$不能识别, 建议改为_
????????????????? ōbjName = "t1$spin"
????????????????? 改为
????????????????? ōbjName = "t1_spin"
??????? △????? FF里设置Attribute为某个对象,然后再取出来,这时候对象的属性都丢失了?
???????????? objText.setAttribute("obj",obj);
???????????? alert(obj.id)?? //正确的名字
???????????? obj = objText.getAttribute("obj");
???????????? alert(obj.id) //null
????????????
????????????????? 在IE下没有问题, FF对setAttribute来说,第2个参数都是字符串型的!!!
????????????????? 所以如果第2个参数是对象时,相当于调用对象的 toString() 方法了
?????????????????
????????????????? 解决的方法是用下面的调用方式:
????????????????? objText.dropdown_select = obj;
?????????????????
????????????????? ōbj = objText.dropdown_select
?????????????????
?????????????????
??????? △????? className -> class
????????????????? FF下用class代替IE下的className
????????????????? 由于class是关键字, 所以需要用 setAttribute/getAttribute才行
????????????????? setAttribute("class","css样式名称");
???????
??????? △????? 在html里定义的属性,必须用getAttribute才行
????????????????? <td id="TD1" isOBJ="true">
????????????????? 获取时:
????????????????? document.getElementByID("TD1").isOBJ? 总返回 undefined, IE下是可以的
????????????????? 应该用:
????????????????? document.getElementByID("TD1").getAttribute("isOBJ")
???????????????????????????????????
???
??????? △????? FF里select控件不再是:总是在顶端显示
????????????????? 所以可能需要设置控件的zIndex
????????????????? IE里覆盖select控件的方法是, 用ifame
???????
??????? △????? 对于if ( vars == undefined ) 下面的值用于判断是等同的
?????????????????? undefined
?????????????????? null
?????????????????? false
?????????????????? 0
???????
???????
??????? △????? 如果FF调用obj.focus(); 报错,请尝试改为:
??????????????????? window.setTimeout( function(){ obj.focus(); }, 20);
?????? △?????? FF下,keyCode是只读的, 那把回车转换为tab怎么办? 在录入时进行键值转换怎么办??
?????????????????
????????????????? 变通的方法是:
????????????????? 1. 回车跳转 -> 自己写跳转处理代码.
????????????????????? 遍历dom里所有的元素, 找到当前元素的下一个能够设置焦点的元素, 给其设置焦点
?????????????????????
????????????????? 2. 在能够录入的控件里,
????????????????????? 把选中的部分替换为新录入的内容: var text = String.fromCharCode(event.keyCode);
????????????????????? 同时阻止按键事件上传, 调用: event.preventDefault()
????????????????????????????
?
?????? △?????? <button> 会被firefox解释为提交form或者刷新页面???
????????????????? 需要写标准<button type="button">
????????????????? 或者在onclick="原函数调用(); return false;"
?????????????????
???????????????????
?????? △?????? 在firefox里, document.onfocus里获得不到实际获得焦点的控件?
????????????????? 为什么document.keydown可以呢?
?????????????????
?????? △?????? children??? -> childNodes??????
??????
?????? △?????? sytle.pixelHeight -> style.height
??????
?????? △?????? 判断函数或者变量是否存在
??????????????? if (!("varName" in window)) var VarName = 1;
???????????????
???
??????????
??????? △????? document.body.clientWidth
??????????????????????????????????????????????
??????????????? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
???????????????
??????????????? 如果html包含上面的语句,则应该用下面的方法获取
??????????????? document.documentElement.clientWidth
???????????????
??????? △ window.createPopup
??????????? FF不支持
???????
??????? △ document.body.onresize
??????????? FF 不支持
??????????? 用window.onresize
???????????
??????????? 注意,页面打开时并不会触发onresize事件? 需要在onload里也调用一次才行
???????
??????? △ box模型的问题
??????????? IE下默认的是 content-box 为了统一,可用设置:
???????????
??????????? div, td {-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
???????????
??????????? 也可用在文档头加入:
??????????? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
???????????
??????????? 但是对IE旧代码影响较大
???????
??????? △ 注册事件
??????????? IE: attachEvent
??????????? FF: addEventListener("blur", myBlur, false);
??????????????? 第1个参数事件名称不需要带"on"
??????????????? 第3个参数false代表事件传递从事件对象沿dom树往body方向传
???
???????
??????? △ 触发事件
??????????? IE: obj.fireEvent("onclick");
??????????? FF:
?????????????? var e = document.createEvent("Events");??
?????????????? e.initEvent("click",?? true,?? false);??
?????????????? element.dispatchEvent(event)
??????? △? 在事件处理函数中获得对象句柄
??????????? var ōThis = this;
??????????? obj.onfocus = function(evt){
??????????????? oThis.doOnFocus(evt);
??????????? }
??
??????? △ 统一事件处理框架代码
??????????? doOnFocus(evt){
??????????????? evt = evt || window.event;
??????????????? var el = evt.target || evt.srcElement;
???????????????
??????????????? // 后续处理
??????????? }
???????????
?????????????????????
??????? △? FF不支持onpropertychange事件
??????????? 但是FF里可以定义属性的setter方法, 如下面的:
??????????? HTMLElement.prototype.__defineSetter__("readOnly",function(readOnly){
??????????????? // 构造虚拟的event对象
??????????????? var evt = [];
??????????????? evt["target"] = this;
??????????????? evt["propertyName"] = 'readOnly'
?????????
??????????????? //onpropertychange函数需要定义evt参数, 参考统一事件处理框架代码
??????????????? if (this.onpropertychange) this.onpropertychange(evt);
??????????? });
????
???????
???????????????????????
??? ☆ IE -> firefox css类??
??????? △ cursor:hand? ->? cursor:pointer
???????????????????????????????
??????? △ expression? firefox不支持
???????? 在IE下expression也非常消耗CPU,所以不应该使用!!
???????? 为了达到较好的效果,应该建立自己的expression to javascript的处理函数
???????? 这样在IE和FF里就都能用了.
??????? △ FILTER? firefox不支持
??????????? filter: Alpha(Opacity=50);
???????? 替换为
???????? -moz-opacity: 0.5;
??????? △ text-overflow
??????????? 不支持
???????????
??????? △ transparent
??????????? firefox下 obj.setAttribute("bgColor","#ffffff") 只支持颜色
??????????? 必须用 obj.style.backgroundColor = "transparent" 才行
??????? △ FF下text控件高度与IE不同, 统一一下
??????????? input[type=text] {
??????????????? height:20px;
??????????? }
??????????? 注意input与[之间不能有空格!
??????? △ font在IE里不能对body和td等起作用, FF可以
??????????? 统一用 font-family
?
