`
dingjun1
  • 浏览: 213695 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE和Firefox浏览器下javascript、CSS兼容性研究

阅读更多
转载:http://blog.csdn.net/herojams/archive/2009/07/01/4311884.aspx

为了将公司的产品在IE和Firefox下达到兼容,前段时间做了如下研究。由于之前准备的就是英文文档,我也懒得再翻译成中文了,呵呵。

首先你要在每个页面执行javascript之前引入下面这个我做好的兼容文件。


IEFirefox.js


1.      obj.firstChild/.lastChild/.nextSibling/.childNodes/.previousSibling should be changed. 3

2.      Assign a property “id” to HTML element if it miss “id” - 3

3.      Keep parameters case-sensitive between file.js and file.cs - 3

4.      Using getElementById(objId) to get a object instead of eval(objId) - 3

5.      Add <tr> between <thead>and<th> -- 4

6.      Change aRows(i).cells to aRows[i].cells - 4

7.      Using standard way to get/set customized value - 4

8.      Using standard way to remove an option. 5

9.      Firefox doesn’t support Expression in style file. 5

10.         Change the event onmouseleave() to onmouseout() - 5

11.         Change obj.fireEvent(eventname) to fireEvent(obj,eventname) - 5

12.         Don’t use the command document.readyState!="complete" - 5

13.         Don’t use window.createPopup() - 6

14.         Change document.body.scrollLeft to document.documentElement.scrollLeft 6

15.         Firefox dosen’t support filter property - 6

16.         Add a postfix ‘px’ to specify the width/height or position - 6

17.         Change style=”cursor:hander” to style=”cursor:pointer” - 7

18.         Don’t forget propertys “title” and “alt” for img element 7

19.         FireFox do not support the style “display:block” into <tr> -- 7

20.         Don’t forget setting opacity for firefox - 7

21.         Have browsers IE and FireFox compatible in .css - 8


   1. obj.firstChild/.lastChild/.nextSibling/.childNodes/.previousSibling should be changed.

Some functions exist in IE and Firefox, but they might implement different functionality, you can change them into our predefined function in SalIEFirefox.js.

Not compatible:

var wrongGet = obj.firstChild ;

var wrongGet = obj.lastChild ;

var wrongGet = obj.nextSibling ;

var wrongGet = obj.childNodes ;

var wrongGet = obj.previousSibling ;

Compatible

var rightGet = getFirstChild (obj)

var rightGet = getLastChild (obj)

var rightGet = getNextSibling (obj)

var rightGet = getChildNodes (obj)

var rightGet = getPreviousSibling (obj)



   1. Assign a property “id” to HTML element if it miss “id”

Add “id” for every HTML element, because if there is only “name” for HTML element, IE will assign the “name” value to “id”, but Firefox will not.

Not compatible:

tmpHtml.Append("<input type=\"text\" name=\"" + str1 + "\" value=\"0\">" );

Compatible:

tmpHtml.Append("<input type=\"text\" name=\"" + str1 + "\" id=\"" + str1 + "\" value=\"0\">" );



   1. Keep parameters case-sensitive between file.js and file.cs

It is case-sensitive for HTML element’s id and any parameter in Firefox

Not compatible:

.js var tableDrag= document.getElementById(SectionId+"_dataTable" );

.cs       sbdTempHtml.Append("<table id=\"" + SectionId + "_datatable \">" );

Compatible:

.js var tableDrag= document.getElementById(SectionId+"_dataTable" );

.cs       sbdTempHtml.Append("<table id=\"" + SectionId + "_dataTable \">" );



   1. Using getElementById(objId) to get a object instead of eval(objId)

Don’t use “eval” to cast a string to Object, in other words, using GetElementById(strObjId) instead of eval(strObjId)

Not compatible:

objField1 = eval ("document.mainform.meritid" + i);

Compatible:

objField1 = document.getElementById ("document.mainform.meritid" + i);



You should be careful of the following:

Compatible:

var objAjax = eval ("SalaryCom.CompPlanner.CppElementScripts." + document.mainform.aaa.value);



   1. Add <tr> between <thead>and<th>

Add <tr> between <thead>and<th>, because in IE it will auto add <tr> for it, but Firefox will not. Then when you are trying to get some element using obj.parentNode() might be different.

Not compatible:

sbdTempHtml.Append("<table>" );

sbdTempHtml.Append("<thead>" );

sbdTempHtml.Append("<th width=\"100\">test field name 1</th>" );

sbdTempHtml.Append("<th width=\"200\">test field name 2</th>" );

sbdTempHtml.Append("</thead>" );

sbdTempHtml.Append("<table>" );

Compatible:

sbdTempHtml.Append("<table>" );

sbdTempHtml.Append("<thead>" );

sbdTempHtml.Append("<tr>" );

sbdTempHtml.Append("<th width=\"100\">test field name 1</th>" );

sbdTempHtml.Append("<th width=\"200\">test field name 2</th>" );

sbdTempHtml.Append("</tr>" );

sbdTempHtml.Append("</thead>" );

sbdTempHtml.Append("<table>" );



   1. Change aRows(i).cells to aRows[i].cells

Not compatible:

aRows(i) .cells

Compatible:

aRows[i] .cells



   1. Using standard way to get/set customized value

Using the following standard way to get/set customized value for HTML element.



Not compatible:

var str = Obj.customizedvalue ;

Compatible:

var str = Obj.getAttribute( “ customizedvalue ”) ;



   1. Using standard way to remove an option.

Using the following standard way to remove an option in selected element.

Not compatible:

oSel.options.remove (oSel.selectedIndex);

Compatible:

oSel.remove (oSel.selectedIndex);



   1. Firefox doesn’t support Expression in style file.

Not compatible:

top : expression (parentNode.parentNode.parentNode.parentNode.scrollTop) ;

width :expression (document.getElementById('CenterDIV').offsetWidth-16+'px') ;

Compatible:

        Consider to use JS method instead of using expression in css.



   1. Change the event onmouseleave() to onmouseout()

There is no event of onmouseleave() in Firefox, you should change it to onmouseout(),but be careful to change it like following

Not compatible:

div.attachEvent("onmouseleave" ,new Function("clearPopUpMenu();" ));

Compatible:

div.attachEvent("onmouseout" ,new Function("clearPopUpMenu();" ));



   1. Change obj.fireEvent(eventname) to fireEvent(obj,eventname)

There is no method obj.fireEvent() in Firefox, you should change it to following:

Not compatible:

div.fireEvent( "onscroll");

Compatible:

fireEvent(div, "onscroll");



   1. Don’t use the command document.readyState!="complete"

Firefox doesn’t support this command document.readyState!="complete"

Not compatible:

              if (document.readyState!="complete" )



   1. Don’t use window.createPopup()

Don’t use window.createPopup() method to create a popup window.

Not compatible:

           window.createPopup();



   1. Change document.body.scrollLeft to document.documentElement.scrollLeft

There are some differences between body.scrollLeft and other HTML element(documentElement.scrollLeft), you should care about it.

Not compatible:

var _left = document.body.scrollLeft;

Compatible:

var _left = document.documentElement.scrollLeft;

     

you should be careful of the following propertys which should be also applied in:

scrollHeight|scrollLeft|scrollTop|scrollWidth



   1. Firefox dosen’t support filter property

A file Cppu_ColorGradient.js can resolve the problem, include the file in Cppb_Header.ascx.cs and do something such as set classname and get client color and so on…



   1. Add a postfix ‘px’ to specify the width/height or position

Not compatible:

document.GetElementById(strObjId).style.width = 10;

Compatible:

document.GetElementById(strObjId).style.width = ‘10px’;



you should be careful of the following propertys which should be also applied in (you can ignore if it is a read only property).

width|height|right|left|scrollHeight|scrollWidth|scrollLeft|scrollTop|offsetHeight|offsetWidth|offsetLeft|offsetTop|clientHeight|clientWidth|clientLeft|clientTop|lineHeight|lineWidth



   1. Change style=”cursor:hander” to style=”cursor:pointer”

Not compatible:

style=”cursor:hander [k1]   ”

Compatible:

style=”cursor:pointer ”



   1. Don’t forget propertys “title” and “alt” for img element

You should assign “title” and “alt” property for img element. Because it will atuo assign “alt” value to “title” property in IE, while it will not in Firefox.

Not compatible:

sbdTempHtml.Append("<img src=\"../Graphics/i_expand.gif\" /></div>" );

Compatible:

sbdTempHtml.Append("<img alt=\"\" title=\"\" src=\"../Graphics/i_expand.gif\" /></div>" );



   1. FireFox do not support the style “display:block” into <tr>

we are using display:block on tr tag which is not correct in Firefox. After applying display:block, the layout of the table is broken. The default style for tr in Firefox should be ‘display:table-row’

Not compatible:

document.getElementById("hrmtr" ).style.display = "block" ;

Compatible:

if (window.isIE)

document.getElementById("hrmtr" ).style.display = "block" ;

else

document.getElementById("hrmtr" ).style.display = "" ;





   1. Don’t forget setting opacity for firefox

It is only applied in IE if you set opacity as “filter:alpha(opacity=50);”,

Not compatible:

filter :alpha(opacity=50) ;

Compatible:

filter :alpha(opacity=50) ;

-moz-opacity :0.5 ; /*css*/



/*The way in js*/

if (!window.isIE)

obj.style.MozOpacity = 0.5;



   1. Have browsers IE and FireFox compatible in .css

If you want to have browsers IE & FireFox compatible in .css, you should copy a line and prefixed “*”, and the line must be under the original line, then Firefox is hight priority automatically, IE will ignore it and only process a line prefixed “*”.

Not compatible:

margin :10px ;

Compatible:

  margin :20px ; /*for firefox*/

  *margin :10px ;     /*for ie7,ie6 */
分享到:
评论

相关推荐

    css入门教程IE和Firefox浏览器CSS兼容性技巧整理.docx

    【CSS入门教程:IE和Firefox浏览器CSS兼容性技巧】 在网页设计中,CSS(层叠样式表)扮演着至关重要的角色,它使得我们能够控制页面的布局和样式。然而,不同浏览器之间对于CSS的支持程度和解析方式存在差异,尤其...

    Javascript的IE和Firefox(火狐)兼容性

    ### Javascript的IE与Firefox(火狐)兼容性解决方案 在Web开发过程中,浏览器兼容性问题一直是开发者们关注的重点之一。由于不同的浏览器对于Web标准的支持程度存在差异,这导致了同样的代码在不同浏览器中的表现...

    css兼容性(IE 和 firefox)技巧大全.doc

    以上技巧是针对IE和Firefox之间CSS兼容性问题的一些常见解决策略。在实际开发中,还需要注意DOCTYPE声明的使用,以确保W3C标准的遵循。同时,随着浏览器的更新,一些旧的兼容性问题可能已经得到解决,但仍需要关注新...

    IE和Firefox对JavaScript的兼容

    然而,由于不同的浏览器对其解析和执行的方式存在差异,尤其是IE(Internet Explorer)和Firefox,这导致了JavaScript在不同浏览器间的兼容性问题。这份文档“IE火狐的JavaScript兼容.doc”深入探讨了这些差异,并...

    IE和Firefox在css,JavaScript方面的兼容性

    标题与描述均聚焦于“IE和Firefox在css,JavaScript方面的兼容性”,这涉及到网页开发中一个重要的议题:浏览器兼容性。在web开发中,确保代码能在不同浏览器上正常运行是至关重要的,因为用户可能使用各种不同的...

    IE与Firefox的CSS兼容大全.rar

    "IE与Firefox的CSS兼容大全"是一个针对这两个浏览器之间CSS兼容性问题的资源集合,旨在帮助网页开发者解决在跨浏览器设计时遇到的难题。 首先,IE浏览器,尤其是早期版本,如6、7和8,对于CSS标准的支持并不完全。...

    让CSS兼容IE和Firefox的技巧集合

    以下是一些针对IE和Firefox的CSS兼容性技巧: 1. **div的垂直居中问题**:在IE和Firefox中,可以通过设置`line-height`与div的高度相同,并结合`vertical-align: middle;`实现垂直居中。但这种方法不适用于多行文本...

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

    然而,由于不同的浏览器对JavaScript的支持程度和实现方式存在差异,尤其是Internet Explorer(IE)和Firefox这两款流行浏览器,开发者经常需要面对兼容性问题。以下是一些常见的JavaScript在IE和Firefox上的兼容性...

    javascript在firefox与ie下的兼容性总结

    JavaScript在Firefox和IE之间的兼容性问题一直是前端开发者面临的一大挑战。由于这两个浏览器内核的不同,导致在处理某些JavaScript特性时存在差异。以下是一些常见的兼容性问题及其解决方案: 1. **Document.form....

    CSS多浏览器兼容性(IE和Firefox)技巧大全推荐

    本文将详细阐述一些针对IE和Firefox的CSS兼容性处理技巧。 首先,要确保网页遵循W3C标准,使用XHTML格式编写代码,并添加DOCTYPE声明。DOCTYPE声明有助于浏览器正确解析页面,避免由于不同的渲染模式导致的兼容性...

    IE和Firefox的Javascript兼容性总结.docx

    JavaScript 兼容性问题在开发跨浏览器的网页应用时至关重要,尤其是针对IE和Firefox这两个具有显著差异的浏览器。本文将详细探讨这些差异,并提供相应的兼容性处理方案。 首先,我们来看函数和方法的差异。在...

    IE和FIREFOX的JAVASCRIPT兼容性总结.pdf

    在Web开发中,JavaScript的兼容性是至关重要的,尤其是在IE(Internet Explorer)和Firefox这两个浏览器之间。由于它们对JavaScript的实现存在显著差异,开发者需要掌握这些差异并采取适当的兼容处理措施。以下是...

    IE和Firefox的Javascript兼容性总结[定义].pdf

    JavaScript兼容性问题一直以来都是Web开发中的重要议题,尤其是在IE与Firefox之间。这两个浏览器对JavaScript的实现存在诸多差异,导致开发者需要进行额外的工作以确保代码在各个浏览器上的表现一致。以下是一些关键...

    IE与Firefox的CSS兼容大全

    本文将详细介绍IE与Firefox之间常见的CSS兼容性问题,并提供实用的解决策略。 #### 一、CSS兼容性的基础概念 在讨论具体的兼容性问题之前,我们先来了解一下CSS兼容性的基本概念: 1. **CSS兼容性**:指的是网页...

    CSS兼容IE和Firefox的技巧集合

    然而,由于不同的浏览器对CSS规范的实现存在差异,特别是Internet Explorer(IE)与Firefox,开发者常常面临兼容性问题。本文将深入探讨解决CSS在IE和Firefox之间兼容性问题的一些关键技巧。 首先,理解盒模型差异...

    javascript和css在IE和Firefox中的不同点及解决兼容性的方案

    JavaScript 和 CSS 在不同的浏览器之间可能存在兼容性问题,尤其是在 Internet Explorer (IE) 和 Mozilla Firefox 这两个浏览器中。本文将详细探讨这些差异,并提供相应的解决策略,以确保网站在各种浏览器中都能...

    IE和Firefox的Javascript兼容性总结终版.pdf

    JavaScript兼容性问题一直是Web开发中的一个痛点,尤其是在处理IE与Firefox之间差异时。本文将深入探讨两者在JavaScript函数和方法、样式访问和设置、DOM操作、事件处理以及其他方面的兼容性处理,帮助开发者解决跨...

    浏览器兼容(支持IE和firefox)

    浏览器兼容性问题一直是Web开发中的一个痛点,尤其是在处理IE6和Firefox这两个有着显著差异的浏览器时。以下是对这些兼容性问题的深入分析和解决方案。 首先,我们关注的是IE6中的`a`标签链接问题。在IE6中,如果`a...

    DOM文档和Javascript的IE和Firefox兼容性

    "Javascript的IE和Firefox兼容性"则涉及到JavaScript在不同浏览器中的行为一致性问题。Internet Explorer(IE)和Mozilla Firefox是两个历史悠久且具有广泛用户基础的浏览器,它们对JavaScript的支持存在差异,尤其...

Global site tag (gtag.js) - Google Analytics