为了将公司的产品在IE和Firefox下达到兼容,前段时间做了如下研究。由于之前准备的就是英文文档,我也懒得再翻译成中文了,呵呵。
首先你要在每个页面执行javascript之前引入下面这个我做好的兼容文件。
1. obj.firstChild/.lastChild/.nextSibling/.childNodes/.previousSiblingshould be changed. 3
2. Assigna property “id” to HTML element if it miss “id”- 3
3. Keepparameters case-sensitive between file.js and file.cs- 3
4. UsinggetElementById(objId) to get a object instead of eval(objId)- 3
5. Add<tr> between <thead>and<th>-- 4
6. ChangeaRows(i).cells to aRows[i].cells- 4
7. Usingstandard way to get/set customized value- 4
8. Usingstandard way to remove an option. 5
9. Firefoxdoesn’t support Expression in style file. 5
10. Changethe event onmouseleave() to onmouseout()- 5
11. Changeobj.fireEvent(eventname) to fireEvent(obj,eventname)- 5
12. Don’tuse the command document.readyState!="complete"- 5
13. Don’tuse window.createPopup()- 6
14. Changedocument.body.scrollLeft to document.documentElement.scrollLeft 6
15. Firefoxdosen’t support filter property- 6
16. Adda postfix ‘px’ to specify the width/height or position- 6
17. Changestyle=”cursor:hander” to style=”cursor:pointer”- 7
18. Don’tforget propertys “title” and “alt” for img element 7
19. FireFoxdo not support the style “display:block” into <tr>-- 7
20. Don’tforget setting opacity for firefox- 7
21. Havebrowsers IE and FireFox compatible in .css- 8
Some functions exist in IE and Firefox, but they might implementdifferent 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)
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 willnot.
Not compatible:
tmpHtml.Append("<input type=/"text/"name=/"" + str1 + "/"value=/"0/">");
Compatible:
tmpHtml.Append("<input type=/"text/"name=/"" + str1 + "/" id=/"" + str1 + "/" value=/"0/">");
It is case-sensitive for HTML element’s idand 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/">");
Don’t use “eval” to cast a string to Object, in other words, usingGetElementById(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);
Add <tr> between <thead>and<th>, because in IE itwill auto add <tr> for it, but Firefox will not. Then when you are tryingto get some element using obj.parentNode() might be different.
Not compatible:
sbdTempHtml.Append("<table>");
sbdTempHtml.Append("<thead>");
sbdTempHtml.Append("<thwidth=/"100/">test field name 1</th>");
sbdTempHtml.Append("<thwidth=/"200/">test field name 2</th>");
sbdTempHtml.Append("</thead>");
sbdTempHtml.Append("<table>");
Compatible:
sbdTempHtml.Append("<table>");
sbdTempHtml.Append("<thead>");
sbdTempHtml.Append("<tr>");
sbdTempHtml.Append("<thwidth=/"100/">test field name 1</th>");
sbdTempHtml.Append("<thwidth=/"200/">test field name 2</th>");
sbdTempHtml.Append("</tr>");
sbdTempHtml.Append("</thead>");
sbdTempHtml.Append("<table>");
Not compatible:
aRows(i).cells
Compatible:
aRows[i].cells
Using the following standard way to get/setcustomized value for HTML element.
Not compatible:
var str = Obj.customizedvalue;
Compatible:
var str = Obj.getAttribute(“customizedvalue”);
Using the following standard way to remove anoption in selected element.
Not compatible:
oSel.options.remove(oSel.selectedIndex);
Compatible:
oSel.remove(oSel.selectedIndex);
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 usingexpression in css.
There is no event of onmouseleave() in Firefox, you should changeit 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();"));
There is no method obj.fireEvent() inFirefox, you should change it to following:
Not compatible:
div.fireEvent("onscroll");
Compatible:
fireEvent(div,"onscroll");
Firefox doesn’t support this command document.readyState!="complete"
Not compatible:
if (document.readyState!="complete")
Don’t use window.createPopup() method tocreate a popup window.
Not compatible:
window.createPopup();
There are some differences between body.scrollLeft and other HTMLelement(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 bealso applied in:
scrollHeight|scrollLeft|scrollTop|scrollWidth
A file Cppu_ColorGradient.js can resolve the problem, include thefile in Cppb_Header.ascx.cs and do something such as set classname and getclient color and so on…
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 bealso 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
Not compatible:
style=”cursor:hander[k1] ”
Compatible:
style=”cursor:pointer”
You should assign “title” and “alt” property for img element.Because it will atuo assign “alt” value to “title” property in IE, while itwill 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>");
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 defaultstyle 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 = "";
It is only applied in IE if you set opacityas “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;
If you want to have browsers IE & FireFox compatible in .css,you should copy a line and prefixed “*”, and the line must be under theoriginal line, then Firefox is hight priority automatically, IE will ignore itand only process a line prefixed “*”.
Not compatible:
margin:10px;
Compatible:
margin:20px; /*for firefox*/
*margin:10px; /*for ie7,ie6*/