当前位置: 首页 > 图文教程 > 网络编程 > Javascript > FF IE兼容性的修改小结

Javascript
用jQuery解决IE不支持的option disable属性
jQuery 源代码显示控件 (Ajax加载方式).
JS backgroundImage控制
jQuery 性能优化指南 (1)
jQuery 性能优化指南(2)
jQuery 性能优化指南(3)
input+select(multiple) 实现下拉框输入值
javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]
jQuery 图像裁剪插件Jcrop的简单使用
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
jquery(1.3.2) 斑马线效果代码
JQuery Jcrop 实现图片裁剪的插件
jquery img src 获取实现代码
javascript 历史记录 经常用于产品最近历史浏览
jquery tabs的实现代码
jQuery 剧场版 你必须知道的javascript
JavaScript 闭包深入理解(closure)
js 图片缩放(按比例)控制代码
广告切换效果(缓动切换)
javascript 用局部变量来代替全局变量

Javascript 中的 FF IE兼容性的修改小结


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 487 ::
收藏到网摘: n/a

FF IE兼容性的修改小结,大家以后在javascript的编写过程中需要注意下。 1.html 标签如果用 $(id) 或者 getElementById 这两个方法取值时,要给该标签加上 id 的属性, IE 、 FF 才兼容。如 $(mobile): 如果填 写 mobile 的 input 没有 id 属性在 FF 中会报这个变量 undefined ;
2. 取 form 表单的某个标签对象,如果要 IE 、 FF 兼容要把 formMain.item 改为 document.formName.item 。
如 form1.webUrl 改为 document.form1.webUrl 。
如果 form 作为一个参数传给某个函数,也要加上 "document.", 如 search(formMain) 改为 search(document.formMain)
3. 取 html 的自定义属性用 obj.attributeName 改为 obj.getAttribute("attributeName") 取则 IE 、 FF 兼容;非自定义属性仍可以按照
obj.attributeName 取。
如: <input type="text" name="memberCn" checkValue="notNull;eLength:25"> 这个标签中的 checkValue 属性为自定义属性,要用 obj.getAttribute("checkValue") 取, IE 、 FF 才兼容,其他属性如 type 属性则仍然可以用 obj.type 取
4.eval 函数,在 FF 和 IE 中使用不一样 , 在 FF 中用“ + ”连接成的一个可执行语句作为 eval 的参数时,不能执行而在 IE 中可以。遇到 要用 eval 时,尽量找别的方法代替。
如: eval("msg_" + textbox.name+ “ .className='wrong' ”) ;
"msg_" + textbox.name+ “ .className='wrong' ”这句话作为 eval 的参数在 IE 中能执行,在 FF 中执行时报 "msg_" + textbox.name 连接得到的空间名 undefined ,不能执行, 要修改为:
document.getElementById("msg_" + textbox.name).className='wrong';
5. 样式中的 display 的属性 block ,在 FF 中如果遇到异常可以变为空;如 item.style.display="block" 可以改为 item.style.display=""
如 $("divType4").style.display="block";
改为 $("divType4").style.display="";
6. 再添加一个: label 在 FF 中好像跟 IE 不一样:比如说以下代码:
<td colspan = "3" class = "line_l"> 成人 <label>
<input name = "amount" type = "text" value = "${amount} " size = "6" maxlength = "10" eleName = "[ 成人预订人数 ]" checkValue = "notNull;eLength:10;isLong" />
人 儿童
<input name = "kidAmount" type = "text" value = "${kidAmount} " size = "6" maxlength = "10" eleName = "[ 儿童预订人数 ]" checkValue = "notNull;eLength:10;isLong" />
人 <span class = "line_red"> * </ span></label>
</ td>
这样写在 FF 中输入时儿童的光标总是跑到成人那里去, IE 中不会,而这样写就不会:
<td width = "25%"> 成人 <label>
<input name = "amount" type = "text" value = "${amount} " size = "6" maxlength = "10" eleName = "[ 成人预订人数 ]" checkValue = "notNull;eLength:10;isLong" /> 人 </ label></ td>
<td width = "75%"> 儿童 <label><input name = "kidAmount" type = "text" value = "${kidAmount} " size = "6" maxlength = "10" eleName = "[ 儿童预订人数 ]" checkValue = "notNull;eLength:10;isLong" /> 人 </ label></ td>
注意 label 的位置,一个是在两个 input 的外面,一个是在一个 input 的外面,
难道 label 标签在 FF 中不能包含两个输入的标签???
还有一个地方:代码如下:
<td><label>
<select name = "provinceId" id = "provinceId" onchange = "iniCity(document.frmMain.provinceId,document.frmMain.cityId,document.frmMain.subCity);" eleName = "[ 所在省份 ]" checkValue = "IS_LONG">
</ select> 省
<select name = "cityId" id = "cityId" onchange = "iniSubCity(document.frmMain.provinceId,document.frmMain.cityId,document.frmMain.subCity);" eleName = "[ 所在城市 ]" checkValue = "IS_LONG"></ select> 市
<select name = "subCity" id = "subCity" eleName = "[ 所在县区 ]" checkValue = "IS_LONG"></ select>
<span class = "red"> * </ span></label></ td>
这个代码时第二个,第三个 select 的光标固定不住,应该是跑到了第一个 select 上去了,但因为是 select 所以看不到,但是上面的 input 能看到。同样这个问题在 IE 中正常。我觉得这个也说明了我上面的说法。