IE6 and Firefox Js的区别
IE6 迁移到 Firefox 的工作笔记jxc 最后更新于: 2008-07-31
☆ 前言
△ 一些参考资料
html5规范, firefox3已经支持
http://www.w3.org/html/wg/html5/
http://nexgenmedia.net/evang/iemozguide/
http://www.javascriptkit.com/domref/
firefox对css的扩展
http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions
关于css3的信息,能在线测试当前浏览器对css3的支持情况
http://www.css3.info
△ 使IE5,IE6支持css2.0标准的 js 扩展库 (推荐)
http://code.google.com/p/ie7-js/
页面load后通过js来实现, 目前对运行时动态修改css的处理还不完善
另外毕竟js模拟的效果,大量应用会有性能问题
△ js调试工具推荐 firefox 的 firebug 插件
能够给js设置断点执行
能够运行时修改css样式
查看dom模型等
最新的支持 firefox3 的 firebug 有点过于严格了, 造成很多代码都提示错误
△ IE8 自带的developer bar也很不错
△ 关于调试js的tip
调试js时,经常受缓存的影响,页面不会加载最新的代码,为此解决如下:
在新页面里打开原来的地址,关闭原来的页面,ok了.
在ff下按Ctrl+shift+del, 打开清除私有信息对话框, 点击立即清除, 回到页面后reload一次也是可行的方案.
☆ javascript 相关
△ 这里也有部分总结
http://www.cnitblog.com/joyboy/archive/2008/07/01/42429.html
△document.all("id") -> document.getElementById("id")
并且控件尽量用id,而不是name标识
提示: form 内用于提交的元素必须定义name
提示:
如果控件只有name,没有id, 用getElementById时:
IE:也可以找到对象
FF:返回NULL
△获得form里某个元素的方法
elForm.elements['name'];
△取集合元素时, ie支持[],() 2种写法, 但是ff仅支持[],如:
table.rows(5).cells(0)
改为:
table.rows.cells
△判断对象是否是object的方法应该为
if( typeof(obj) == "object")
△eval(对象名称) ->document.getElementById
FF支持eval函数
△在当前对象的前面插入节点
obj.insertAdjacentElement("beforeBegin", elText);
改为用
obj.parentNode.insertBefore(elText, obj);
△FF的createElement不支持HTML代码
用document.write(esHTML);
或者创建元素后再设置属性, 对input元素来说,需要先设置type再加入到dom里
var elInput = createElement("input");
elInput.type = "checkbox";
var obj2 = document.getElementById("id2");
obj2.parentNode.insertBefore(elInput, obj2);
如果是直接插入html代码,则可以考虑用
createContextualFragment
△innerText -> textContent
FF 没有innerText
如果确定没有html代码, 也可以统一用 innerHTML
△对象名称中的$不能识别, 建议改为_
objName = "t1$spin"
改为
objName = "t1_spin"
△FF里设置Attribute为某个对象,然后再取出来,这时候对象的属性都丢失了?
elText.setAttribute("obj", obj);
alert(obj.id) //正确的名字
obj = objText.getAttribute("obj");
alert(obj.id) //null
在IE下没有问题, FF对setAttribute来说,第2个参数都是字符串型的!!!
所以如果第2个参数是对象时,相当于调用对象的 toString() 方法了
解决的方法是用下面的调用方式:
elText.obj = obj;
obj = elText.obj
△在html里定义的属性,必须用getAttribute才行
<input type="text" id="t1" isOBJ="true">
获取时:
document.getElementById("t1").isOBJ总返回 undefined, IE下是可以的
应该用:
document.getElementById("t1").getAttribute("isOBJ")
△el.class -> el.className
由于class是关键字, 所以需要用 className
或者用 setAttribute/getAttribute
setAttribute("class","css样式名称");
△FF里select控件不再是:总是在顶端显示
需要设置控件的zIndex
IE6 里select控件总在顶端显示, div不能盖住select
覆盖select控件的方法是, 用 ifame 盖住 select, 再设置div元素的zIndex大于iframe的zIndex
△对于if ( vars == undefined ) 下面的值用于判断是等同的
undefined
null
false
0
△如果FF调用 el.focus(); 报错
尝试改为:
window.setTimeout( function(){ el.focus(); }, 20);
△FF下,keyCode是只读的, 那把回车转换为tab怎么办? 在录入时进行键值转换怎么办??
解决方案:
1. 回车跳转 -> 自己写跳转处理代码.
遍历dom里所有的元素, 找到当前元素的下一个能够设置焦点的,当前可见的元素, 给其设置焦点
如果该元素的父节点是不可见的, 则还是会报错, 所以设置焦点时, 需要try catch, 如果报错,则继续找下一个
2. 录入时进行键值转换.
利用selection,选中光标后面的内容,替换为新输入的内容
△<button> 会被firefox解释为提交form或者刷新页面???
需要写上type <button type="button">按钮</button>
或者在
△在firefox里, document.onfocus里获得不到实际获得焦点的控件?
为什么document.keydown可以呢?
△children -> childNodes
△sytle.pixelHeight -> style.height
△判断函数或者变量是否存在,没有则创建
if (!("funcA" in window)) var funcA = function() { alert("请覆写funcA方法"); };
△获得客户区尺寸
IE里与doctype有关
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
如果html包含上面的语句,则应该用下面的方法获取
document.documentElement.clientWidth
否则用
document.body.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
但是对IE旧代码影响较大
△注册事件
IE: el.attachEvent
FF: el.addEventListener("blur", myBlur, false);
第1个参数事件名称不需要带"on"
第3个参数false代表事件传递从事件对象沿dom树往body方向传(与IE的方向一致)
ff里如果不指定 el 则是给全局的事件注册?? 全局岂不是window?
△触发事件
IE: el.fireEvent("onclick");
FF:
var e = document.createEvent("Events");
e.initEvent("click", true, false);
element.dispatchEvent(event)
△在自定义函数中获得对象句柄
var oThis = this;
obj.onfocus = function(evt){
oThis.doOnFocus(evt);
}
△统一事件处理框架代码
function 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 ("onpropertychange" in this) this.onpropertychange(evt);
}
);
△ document.activeElement
用途: 在当前对象的 onblur 事件里, 可以通过 activeElement 获得下一个获得焦点的对象
html5规范里加入
firefox3里已经支持,与IE里效果一样
☆ css 相关
△cursor:hand->cursor:pointer
△FILTERfirefox不支持
filter: Alpha(Opacity=50);
替换为
-moz-opacity: 0.5;
△text-overflow
不支持
△transparent
firefox下 obj.setAttribute("bgColor","#ffffff") 只支持颜色
必须用 obj.style.backgroundColor = "transparent" 才行
△FF下text控件高度与IE不同
input {
height:20px;
}
注意input与[之间不能有空格!
△font在IE里不能对body和td等起作用
统一用 font-family
△expressionfirefox不支持
expression的确能够解决IE6对css2支持不足的问题,这样只需要定义css就可以兼容IE和FF了
在IE下expression非常消耗CPU, 所以不建议在大量的element上应用!!
△IE6 仅支持 a:hover, 不支持其它对象的 :hover
1. 加入下面的css
.ie-hover {
behavior: expression(
this.onmouseover = new Function("this.className = 'hover';"),
this.onmouseout = new Function("this.className = 'ie-hover';"),
this.style.behavior = null
);
}
上面必须用 this.style.behavior = null , 否则某些情况会有严重的性能问题
2. 在需要 :hover 的元素上增加 class
<li class="ie-hover">
3. 定义 :hover 样式同时定义 .hover 样式
ul li:hover , ul li.hover {
xxx
}
△IE6里 <a> 必须定义href属性a:hover 才有效
页:
[1]