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).

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 */

IE和Firefox浏览器下javascript、CSS兼容性研究相关推荐

火狐浏览器表单不跳转_表单button的outline在firefox浏览器下的问题
outline的使用,大家都喜欢在reset样式表中直接重置: 复制代码代码如下: * { outline: none; } Eric Meyers 在他的CSS Reset 是这样重置的: 复制代码 ...
firebug可以在非firefox浏览器下使用
firebug可以在非firefox浏览器下使用,但是效果当然不如firefox下好使用,但是也可以解决一些ie9以下版本不好调试的弊病使用方法:在需要调试的页面上加: <script typ ...
浏览器下的CSS透明度
浏览器下的CSS透明度元素透明度时常是个恼人的问题,下面这种方式可以实现所有浏览器下的透明度设置: .transparent {zoom: 1;filter: alpha(opacity=50);o ...
解决IE、firefox浏览器下JS的new Date()的值为Invalid Date、NaN-NaN的问题
解决IE.firefox浏览器下JS的new Date()的值为Invalid Date.NaN-NaN的问题参考文章: (1)解决IE.firefox浏览器下JS的new Date()的值为Inv ...
ctf：Firefox浏览器下安装一些常用的插件
一．配置KALI Linux和渗透测试环境在这一章,我们将覆盖以下内容: l 在Windows和Linux上安装VirtualBox l 创建一个Kali Linux虚拟机 l 更新和升级Ka ...
Firefox, IE等不同浏览器对JavaScript,CSS不同解析问题 (转备以后使用)
一.针对不同浏览器css的写法有两种方法: 1.用*号和_下划线来区分,如下: background:orange;*background:green;_background:blue; IE6支持下 ...
360浏览器下的页面兼容性问题以及解决方法
引言: 在Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而在其他的浏览器上,皆为正常状态,问题出在哪里呢? 问题的提出: Web页面在360的浏览器上,显示不正确. 但是在Fir ...
多浏览器下，CSS截断功能。
在多浏览器下,往往采用CSS截断,在IE浏览器中可实现,但是在Firefox,Chrome下,往往不能实现截断处理,导致FF下,显示半个字符样式.为解决此问题,查询好久终于在坛子中找到一个好的方式. ...
解决SWFUpload在Chrome、Firefox浏览器下session找不到的问题
SWFUpload是一个非常不错的异步上传组件,但是在Chrome.Firefox等浏览器下使用的时候会有问题.问题如下:为了防止跳过上传页面直接向"接受SWFUpload上传的一般处理程 ...
解决在ubuntu的firefox浏览器下不能看b站视频的问题
1.打开终端: 2.输入如下指令: sudo apt-get install ubuntu-restricted-extras 3.会弹出一个类似软件安装的界面,点击Tab使光标指到"安装& ...

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

IE和Firefox浏览器下javascript、CSS兼容性研究相关推荐

最新文章

热门文章