IE6 迁移到 Firefox 的工作笔记
jxc 最后更新于: 2010-07-09
☆ 前言
△ 一些参考资料
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模型等
△ IE8 自带的developer bar也不错
☆ 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[5].cells[0]
△ 判断对象是否是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);
或者创建元素后再设置属性,
var el = createElement("input");
el.type = "checkbox"; // 对input元素来说,需要先设置type再加入到dom里
var obj2 = document.getElementById("id2");
obj2.parentNode.insertBefore(el, obj2);
如果是直接插入html代码,则可以考虑用
createContextualFragment
△ innerText -> textContent
FF 没有innerText
可以考虑用 innerHTML
IE6/7/8 里 select 控件的 innerHTML 有 bug,
不过 elSelect.innerHTML = ''; 能够执行, 可用于快速删除select的内容
△ 对象名称中的 $ 不能识别, 建议改为 _ 或者 -
name = "t1$spin"
改为:
name = "t1_spin"
name = "t1-spin"
△ FF里设置Attribute为某个对象,然后再取出来,这时候对象的属性都丢失了?
el.setAttribute("obj", obj);
alert(obj.id) //正确
obj = el.getAttribute("obj");
alert(obj.id) //null
在IE下没有问题, FF 里 setAttribute 第2个参数都是字符串型
解决的方法是直接赋值
el.obj = obj;
obj = el.obj
△ 在html里定义的属性,必须用getAttribute才行
<input type="text" id="t1" isOBJ="true">
document.getElementById("t1").isOBJ
FF 里返回 undefined, IE下是可以的
应该用:
document.getElementById("t1").getAttribute("isOBJ")
△ el.class -> el.className
由于class是关键字, 所以需要用 className
el.className = 'combobox-arrow';
或者用 setAttribute
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>
或者 οnclick="原函数调用(); return false;"
△ 在firefox里, document.onfocus里获得不到实际获得焦点的控件?
为什么document.keydown可以呢?
△ children -> childNodes
△ sytle.pixelHeight -> style.height
△ 判断函数或者变量是否存在, 没有则创建一个, 避免调用时 js 错误
if (!("foo" in window)) var foo = function() { alert("请实现 foo 方法"); };
△ 获得客户区尺寸
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 为了统一, 可在页面第一行写:
<!DOCTYPE html>
这样写即可, 不用写剩余的内容, google和taobao都这么用
△ 注册事件
IE: el.attachEvent
FF: el.addEventListener("blur", myBlur, false);
第1个参数事件名称不需要带"on"
第3个参数false代表事件传递从事件对象沿dom树往body方向传(与IE的方向一致)
△ 触发事件
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 获得下一个获得焦点的对象
在做combobox等组件时很有用
html5规范里加入, firefox3里已经支持, 但是要做一点儿技巧处理才能得到 activeElement
function text_blur(evt){
evt = evt || window.event;
var el = evt.target || evt.srcElement;
var btn = el.popup_button;
// post 处理才行
window.setTimeout(function(){text_blur_post(btn);},20);
}
function text_blur_post(btn){
// 这时候才能获得到 activeElement
var elActive = document.activeElement;
if (elActive != btn) btn.style.display = "none";
}
☆ css 相关
△ cursor:hand -> cursor:pointer
△ 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等起作用
统一用 font-family
△ 字体推荐用 Arial 字体
虽然 FF 默认用宋体, 但是Arail字体的综合表现比较好
△ expression firefox不支持
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 才有效
637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
