写 FireFox 和 IE 都支持的网页所要注意的事项
2014-10-09 10:26
330 查看
一、 提交 与 重置 时的注意项
先看如下代码:
以上就是一个表单, 请注意 重置的部分演示地址:http://你的IP/dev/err_case/2.jsp
问题: 在FF下,重置也会交表单, 解决办法: 去掉<label>
---------------------------------------------------------------------------------------------------------------------------------------------
二、IE6 onclick事件 要加 return false
$PF(this).submit() 的作用是提交表单
我们想单击超链接,来提交表 单, 在IE7与FF下都正常, 但在IE6下, 不能提交表单
要加return false , 如下
----------------------------------------------------------------------------------------------------------------------------------------------
三, 关于节点类型 在说一说
万维网联盟(W3C)定义HTML DOM 标准节点有以下几种 ()
IE与FF 对 以上节点的 "理解" 有差异,如比我们写js : 对象.nextSibling , 来取得对象的下一个兄弟节点,
在IE中,只会取ELEMENT_NODE (元素节点), 忽略其它类型节点. FF会取得上面各种类型节点.
如:
结果:
IE中:next 是元素节点 (第二个<tr>)
FF中:next 是文本节点 (那个换行)
----------------------------------------------------------------------------------------------------------------------------------------------
四, 不正确的隐藏table中的行
想通过隐藏DIV来实现不显示" ;第一行" , 是不行的
先看如下代码:
<form id="addtag" name="addtag" action="/ns/ur/maddtag.do" method="post" onsubmit="return validate();"> <table width="100%" border="0" cellpadding="4" cellspacing="0" class="l_table_p" > <tr> <td bgcolor="#DBF9DF"> </td> <td bgcolor="#DBF9DF" align="right">名 称:</td> <td colspan="3" bgcolor="#DBF9DF"><input type="text" name="tagname" id="tagname" style=" width:150px;" maxlength="10"/></td> </tr> <tr> <td colspan="5" bgcolor="#DBF9DF"> <label> <input type="submit" value="添加" class="btn_c3"/> <input type="reset" value="重置" class="btn_c3"/> </label> </td> </tr> </table> </form>
以上就是一个表单, 请注意 重置的部分演示地址:http://你的IP/dev/err_case/2.jsp
问题: 在FF下,重置也会交表单, 解决办法: 去掉<label>
---------------------------------------------------------------------------------------------------------------------------------------------
二、IE6 onclick事件 要加 return false
$PF(this).submit() 的作用是提交表单
<a href="javascript:;" onclick="$PF(this).submit();"> 提交</a>
我们想单击超链接,来提交表 单, 在IE7与FF下都正常, 但在IE6下, 不能提交表单
要加return false , 如下
<a href="javascript:;" onclick="$PF(this).submit();return false;"> 提交</a>
----------------------------------------------------------------------------------------------------------------------------------------------
三, 关于节点类型 在说一说
万维网联盟(W3C)定义HTML DOM 标准节点有以下几种 ()
ELEMENT_NODE | 1 | 元素节点 |
ATTRIBUTE_NODE | 2 | 属性节点 |
TEXT_NODE | 3 | 文本节点 |
IE与FF 对 以上节点的 "理解" 有差异,如比我们写js : 对象.nextSibling , 来取得对象的下一个兄弟节点,
在IE中,只会取ELEMENT_NODE (元素节点), 忽略其它类型节点. FF会取得上面各种类型节点.
如:
<table> <tr id="nst"><td></td></tr>(这里有换行,就是一个文本节点) <tr><td></td></tr> </table> \-------------------------------------\- <js> var o=$('nst'); var next=o.nextSibling; </js> \--------------------------------------\-
结果:
IE中:next 是元素节点 (第二个<tr>)
FF中:next 是文本节点 (那个换行)
解决办法: 在base.js中有如下方法: 通过判断 nodeType == 1 来解决问题 // 获得下一个元素对象(nodeType=1) function $NE(e) { e = e.nextSibling; while (e && e.nodeType != 1){e = e.nextSibling;} return e; } // 获得第一个元素对象(nodeType=1) function $FE(e) { e = e.firstChild; while (e && e.nodeType != 1){e = e.nextSibling;} return e; }
----------------------------------------------------------------------------------------------------------------------------------------------
四, 不正确的隐藏table中的行
想通过隐藏DIV来实现不显示" ;第一行" , 是不行的
<table width="922" border="0" cellspacing="0" cellpadding="0"> <div style="display:none"> <tr> <td> 第一行</td> </tr> </div> <tr> <td> 第二行</td> </tr> </table>
相关文章推荐
- 写 FireFox 和 IE 都支持的网页所要注意的事项
- JS 获取网页内容高度 和 网页可视高度 支持IE 6789 Firefox Chrome
- 网页HTML右侧浮动DIV层广告或在线客服图片框最佳代码(支持Firefox&IE)
- IE、Firefox使用绝对定位(absolote) 网页居中布局 支持IE7,8,FF
- 开发注意:Firefox和IE兼容注意事项
- IE、Firefox、Chrome 的JS代码兼容注意事项
- IE、Firefox、Chrome 的JS代码兼容注意事项
- AJAX w3school 以及IE、Firefox、Chrome 的JS代码兼容注意事项
- 各大浏览器实现当前网页下载功能(当前加载时自动弹出另存为窗口,支持Firefox,Chrome,IE等)
- 用JS操作CSS滤镜,注意IE、firefox、chrome浏览器对滤镜支持各不相同
- JS 获取网页内容高度 和 网页可视高度 支持IE6789 Firefox Chrome
- 网页完美内嵌多媒体,支持IE,Mozilla、Firefox、NetScape、Opera
- 解析IE, FireFox, Opera 浏览器支持Alpha透明的方法
- IE与FireFox对CSS支持不足问题汇总之一
- 简单的HTML在线编辑器源码(支持IE。FireFox)
- 为IE for Pocket PC设计网站要注意的事项
- IE与FireFox对CSS支持不足问题汇总之二
- 仿google拖动,使用DIV技术。支持IE和firefox
- FireFox的getYear的注意事项
- jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox