☆ 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
分享到:
相关推荐
IE会让相邻的也浮动起来,Chrome 和FF不会,他们的float对象不再占据空间,所以显示效果也不同。 Chrome 下 IE <style> body{ padding:0; margin:0;} #yi{ background:#0033FF; height:298px; width:298px...
搜集整理的CSS HACK,也即是在多种浏览器(主要是ie6 ie7 ie8 ff)下样式统一的解决办法。 内容还是较全的,前台开发中常见的兼容性问题都可以找到解决方法,值得研究。 包括各浏览器CSS hack,技巧。有实例。
本文是软件开发网小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧! 1. children与childNodes IE提供的children、childNodes和firefox下...
本文向大家简单描述一下DIV+CSS相对IE6 IE7和IE8兼容问题整理,重点介绍一下IE6 IE7和IE8等浏览器的区别和联系,相信本文介绍一定会让你有所收获。 DIV+CSS相对IE6 IE7和IE8兼容问题整理 1.区别IE和非IE浏览器 ...
下面是兼容IE和FF的js脚本做法和分解(部分选自网上,经本人整理),希望对大家有帮助。 .以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox //window.event IE:有window.event对象 FF:没有...
超链接访问过后hover...复制到系统剪贴板之IE,ff兼容版 javascript为FF设置首页 IE6使用滤镜使PNG图片透明后,容器内链接失效的问题 禁用文本框中文输入法的通用方法 我不是原创,我支持原创,我整理过的方便查看。
下面是高手整理的一些javascript在ie和ff中的兼容写法
做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同。这就需要我们程序员去兼容他们下面是兼容IE和FF的js脚本做法和分解(部分选自网上,经本人整理),希望对大家有帮助。
//document.writeln ('<dd>06月21日 修复IE6下兼容问题</dd>'); //document.writeln ('<dd>06月01日 懒人图库2012新版上线</dd>'); //document.writeln ('<dd>05月26日 新增北方网通服务器</dd>'); //document....
一、基础概念 CSS hack:针对不同的浏览器写不同的CSS code的过程。...div+css浏览器兼容IE6,IE7,FF之间的标识区别: IE6 IE7 FF * √ √ × important × √ √ 1. IE都能识别* ; 标准浏览
众所周知IE和FF在对js支持不尽相同,本文整理了一些常用方法及属性在IE和FF中的不同实现,对此感兴趣的朋友可以参考下,希望对大家学习IE和FF的js兼容有所帮助
代码在IE和Chrome能显示正常,但是在FF下就会有换行的问题,此问题让我很是疑惑,于是搜集整理了一些实用解决技巧,晒出来与大家一起分享,感兴趣的朋友可以参考下,希望本文对你学习浏览器兼容知识有所帮助,好了话不...
本文将为你总结CSS针对各浏览器的兼容HACK(以IE6/IE7/IE8 /FF为主),以及IE特有的条件注释使用方法.
一般来说,内存出现问题的可能性并不大,主要方面是:内存条坏了、内存质量有问题,还有就是2个不同牌子不同容量的内存混插,也比较容易出现不兼容的情况,同时还要注意散热问题,特别是超频后。你可以使用MemTest ...
css在各种浏览器中不同的写法主要是为了兼容css样式可以在不同的浏览器中正常显示,本文整理了一些个人在实战中的一些经验,喜欢的朋友可以收藏下
它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果...
-修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,用来定时发起AJAX请求。 +2009-09-06 v2.1.0 -Button的Pressed属性值能够正确的反映客户端的变化。 -优化...
-在2009-03-03 v1.3.0曾经提到这个兼容问题,并有这样的规则,如果Asp.net的按钮AJAX提交,必须设置UseSubmitBehavior="false" --也就是说生成的input的type不能是"submit",而这个限制在有些情况下是不可原谅的...
最近在蓝色理想转悠,发现很多朋友提出有关DIV CSS排版问题,以及IE与FF的兼容问题。怎么问的都有,结果就是一个——显示很奇怪,很难调整。我们浏览的大多数网站,或者用Dreamweaver创建一个新的网页文档时,源码的...
整理一个纯CSS+div的漂亮蓝色一级导航菜单效果! 演示地址:http://www.25gx.com/wl2007/UploadFiles/Beautiful-blue-navigation/ 解压密码:www.25gx.com 注意:兼容IE7、IE8、FF、360。其他浏览器未测试。