`

写 FireFox 和 IE 都支持的网页所要注意的事项

阅读更多

一、 提交 重置 时的注意项
先看如下代码:

<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">&nbsp;</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>



我们想单击超链接,来提交表 ,  IE7FF下都正常, 但在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
文本节点

 

IEFF 以上节点的 "理解" 有差异,如比我们写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>&nbsp;第一行</td>
  </tr>
</div>
  <tr>
    <td>&nbsp;第二行</td>
  </tr>
</table>


分享到:
评论

相关推荐

    Firefox IE Tab

    "Firefox IE Tab"是一款专为火狐浏览器设计的扩展,它允许用户在Firefox中以Internet Explorer内核的方式浏览网页。这个扩展对于那些需要在不同浏览器环境中测试网站兼容性的开发者或者经常在两个浏览器间切换的用户...

    让IE和火狐同时兼容

    特别是在早期的Web时代,Internet Explorer(简称IE)与Mozilla Firefox(简称火狐)这两款浏览器之间存在着显著的差异,这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...

    火狐firefox支持ocx

    标题中的“火狐Firefox支持OCX”指的是Mozilla Firefox浏览器能够加载和运行ActiveX控件(OCX),这是在Windows操作系统中常见的一种组件技术。ActiveX控件是微软开发的一种插件形式,允许网页或者应用程序嵌入各种...

    兼容firefox火狐、IE6IE7IE8加入收藏,设为首页代码

    针对不同的浏览器,特别是老版本的浏览器如Firefox火狐和Internet Explorer (IE6、IE7、IE8),需要编写特定的代码来实现特定的功能,例如“加入收藏”和“设为首页”。下面将详细解释如何实现这些功能。 首先,我们...

    让FireFox支持OCX插件的安装包

    总结起来,要让Firefox支持OCX插件,你需要下载并安装两个文件——axhost.r39.xpi作为Firefox的扩展,以及ffactivex-setup-r39.exe可能是为了配置Firefox的环境。完成后,Firefox应该能够像Internet Explorer那样,...

    js firefox支持问题

    - **在使用数组时需注意**:在处理如`document.forms["formName"]`或`document.getElementsByName("inputName")[1]`这样的数组操作时,IE和Firefox的行为可能不同。开发者应确保在代码中考虑到这些细微差别。 #### ...

    IE6、IE7、Firefox之间的兼容写法

    ### IE6、IE7、Firefox之间的兼容写法详解 #### 一、引言 随着Web技术的不断发展,浏览器兼容性问题一直是前端开发人员面临的重要挑战之一。尤其在早期的Web开发过程中,不同版本的Internet Explorer(简称IE)...

    js在IE与firefox的差异集锦

    在写兼容IE和Firefox的拖动窗口代码时,需要特别注意这一点。 为了统一处理不同浏览器的行为,可以通过编写JavaScript代码来检测浏览器类型。如果浏览器支持document.all语法,则认为是IE浏览器,否则为Firefox。...

    IE与Firefox的事件区别

    而在Firefox及支持DOM的浏览器中,使用`addEventListener`和`removeEventListener`方法,如下所示: ```javascript var obj = document.getElementById("id"); var fnClick = function() { alert("ss"); }; var ...

    js在IE和Firefox不同之处

    ### js在IE和Firefox不同之处 在Web开发中,JavaScript(简称JS)是实现网页交互性的核心语言之一。然而,由于不同的浏览器对于JS标准的支持程度有所差异,这往往会导致跨浏览器兼容性问题的出现。IE(Internet ...

    兼容IE和Firefox的Html在线编辑器!

    IE(Internet Explorer)和Firefox是当时两大主流的浏览器,它们对HTML、CSS和JavaScript的支持程度各有不同,导致开发跨浏览器的网页应用需要额外的努力。本篇文章将深入探讨如何创建一个兼容IE和Firefox的Html在线...

    Selenium各大浏览器驱动【谷歌chrme、火狐Firefox、IE浏览器】

    本篇文章将详细阐述Selenium如何与Chrome、Firefox和IE这三大主流浏览器进行集成,以及驱动的下载和使用方法。 首先,我们来了解一下Selenium WebDriver。WebDriver是一种接口,让开发者可以编写跨浏览器的自动化...

    Javascript的IE和Firefox兼容性问题集合

    8. **Date对象**:IE和Firefox对Date对象的解析和格式化可能存在差异,需注意处理时区和格式问题。 9. **CSS3动画和过渡**:Firefox和IE对CSS3动画和过渡的支持不同,可能需要使用JavaScript模拟,或者使用CSS3前缀...

    解决CSS在IE与火狐下的兼容问题

    通过以上策略,你可以有效地解决CSS在IE和Firefox之间的兼容性问题,确保你的网站在各种浏览器下都能提供良好的用户体验。不断学习和实践,熟悉各种浏览器的特性,是成为一名优秀前端开发者的必经之路。

    margin在firefox与IE的兼容性设计

    在不同浏览器之间,CSS的解析和渲染可能存在差异,尤其是老版本的Internet Explorer(IE)和Firefox。标题提到的问题“margin在firefox与IE的兼容性设计”正是这种差异的一个典型例子。 在CSS中,`margin`属性用于...

    CSS hack 针对IE6,IE7,firefox显示不同效果

    - IE6支持下划线,而IE7和Firefox都不支持。 - 通常在CSS属性值前添加下划线,仅IE6能识别。 具体的CSS hack写法如下: - 区别IE6与Firefox:background: orange; *background: blue; - 区别IE6与IE7:background...

    使网页变灰,支持IE、FireFox、Opera、360浏览器等

    标题 "使网页变灰,支持IE、FireFox、Opera、360浏览器等" 提到的是一个关于实现网页变灰效果的技术,这个效果通常在网站上用于表示哀悼或者纪念活动,将整个页面调成灰色。这个技术涉及到浏览器兼容性和JavaScript...

    MyEclipse IE,Firefox插件

    在开发过程中,为了方便开发者进行前端页面的预览和调试,MyEclipse提供了与浏览器集成的插件,包括对Internet Explorer(IE)和Firefox的支持。这些插件能够帮助开发者在IDE内部直接运行和测试网页,从而提高开发...

    支持FireFox与IE的对联广告js

    标题“支持FireFox与IE的对联广告js”暗示了我们正在讨论的是一个JavaScript脚本,这个脚本被设计用于在Firefox和Internet Explorer(IE)这两种浏览器上展示对联广告。对联广告通常指的是那种横跨网页两侧,形状...

Global site tag (gtag.js) - Google Analytics