Summary of compatibility problems and solutions for Firefox and IE

  • 2020-03-26 21:22:31
  • OfStack

In the process of developing multilingual Java web sites, I found a lot of code that works in FF, but not in IE, and vice versa. The incompatibility and uniformity of JavaScript between IE and Firefox are summarized as follows:

1. Firefox compatible outerHTML. There is no method for outerHTML in FF
 
if (window.HTMLElement) { 
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) { 
var r=this.ownerDocument.createRange(); 
r.setStartBefore(this); 
var df=r.createContextualFragment(sHTML); 
this.parentNode.replaceChild(df,this); 
return sHTML; 
}); 

HTMLElement.prototype.__defineGetter__("outerHTML",function() { 
var attr; 
var attrs=this.attributes; 
var str="<"+this.tagName.toLowerCase(); 
for (var i=0;i<attrs.length;i++) {="" attr="attrs[i];" if(attr.specified)="" str+=" " +attr.name+'="'+attr.value+'" ';="" }="" if(!this.canHaveChildren)="" return="" str+"="">"; 
return str+">"+this.innerHTML+""; 
}); 

HTMLElement.prototype.__defineGetter__("canHaveChildren",function() { 
switch(this.tagName.toLowerCase()) { 
case "area": 
case "base": 
case "basefont": 
case "col": 
case "frame": 
case "hr": 
case "img": 
case "br": 
case "input": 
case "isindex": 
case "link": 
case "meta": 
case "param": 
return false; 
} 
return true; 
}); 
} 

2. Collection class object problem

IE, you can use () or [] to get the collection class object; Under Firefox, you can only use [] to get collection class objects.

3. Custom attribute problems

Under IE, you can use the method of obtaining general attributes to obtain custom attributes, or you can use getAttribute() to obtain custom attributes; In Firefox, you can only get custom attributes using getAttribute().

4. Eval (" idName ")

IE, you can use eval("idName") or getElementById("idName") to get the id of the idName HTML object; Firefox can only use getElementById("idName") to get HTML objects with id as idName.

5. The problem that the variable name is the same as an HTML object ID

Under IE, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document; In Firefox, you can use the same variable name as the HTML object ID. Not under IE. Solution: use document.getelementbyid ("idName") instead of document.idname. When declaring variables, always add var to avoid ambiguity.

6. The problem of const

Firefox, you can use the const keyword or var keyword to define constants; Under IE, only var keyword can be used to define constants.

7. Input.type attribute problem

IE input.type attribute is read only; But the input.type property under Firefox is read and write.

8. The window. The problem of the event

Window.event can only be run in IE, not in Firefox, because Firefox's event can only be used in the event site.

IE:
< Input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/>
.
< Script language = "javascript" >
The function gotoSubmit8_1 () {
.
Alert (window. The event); / / use the window. The event
.
}
< / script>
IE&Firefox:
< Input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/>
.
< Script language = "javascript" >
The function gotoSubmit8_2 (evt) {
.
Evt = evt? Evt: (window. The event? Window. The event: null);
Alert (evt). / / use evt
.
}
< / script>

9. Event.x and event.y

Under IE,even object has x,y attributes, but no pageX,pageY attributes; Under Firefox, the even object has pageX and pageY attributes, but no x and y attributes. Event. X: event. PageX;) Instead of event.x in IE or event.pagex in Firefox.

10. The event. The problem of srcElement

Under IE,even object has srcElement attribute, but no target attribute; Under Firefox, the even object has a target attribute, but no srcElement attribute. Event. SrcElement: event. The target) Instead of event.srcelement in IE or event.target in Firefox.

11. The window. The location. The problem of href

IE or firefox 2.0.x, you can use window.location or window.location.href; Under firefox 1.5.x, you can only use window.location.solution: use window.location instead of window.location.href.

12. Modal and modeless window problems

IE, through the showModalDialog and showModelessDialog open modal and non-modal Windows; The solution: directly use window.open(pageURL,name,parameters) to open a new window.

If you need to pass arguments from the child window back to the parent window, use window.opener in the child window to access the parent window. ParWin. Document. GetElementById (" Aqing "). The value = "Aqing";

13. The problem of frame

The following frame is an example:

< Frame SRC ="xxx. HTML "id="frameId" name="frameName" />

(1) access frame object: IE: use window. FrameId or Windows. The frameName to access the object frame. Firefox: can only use Windows. FrameName to access the object frame. In addition, can be used in Internet explorer and Firefox window. The document. The getElementById (" frameId ") to access the object frame.

(2) the content of the switch frame: can be used in Internet explorer and Firefox window. The document. The getElementById (" testFrame "). The SRC = "XXX. HTML" or Windows. FrameName. Location = "XXX. HTML" to switch the contents of the frame.

If you need to pass arguments from the frame back to the parent window, you can use parent in frme to access the parent window. For example: the parent document. Form1. Filename. Value = "Aqing";

Look for problems

Take the following getElementByClass for example:

Document. GetElementByClass (" classname1 "); This function does not work under IE, can be used

GetElementsByClassName instead, but this function returns a NodeList match instead of a single object such as:
 
var list, index; 
list = document.getElementsByClassName("classname1"); 
for (index = 0; index < list.length; ++index) { 
list[index].setAttribute(); 
} 

For this type of problem, it is best to use class libraries such as jQuery, Prototype, Google Closure, etc., which are compatible with all browsers.

For instance, in the jQuery:

$(". Home1 "). The attr ();

15. The problem of the body

Firefox's body exists before the body tag is fully read by the browser; IE's body does not exist until the body tag is read by the browser.

Such as:

Firefox:
 
<body > 
<script type="text/javascript"> 
document.body.onclick = function(evt){ 
evt = evt || window.event; 
alert(evt); 
} 
</script> 
</body> 
IE&Firefox :  
<body > 
</body> 
<script type="text/javascript"> 
document.body.onclick = function(evt){ 
evt = evt || window.event; 
alert(evt); 
} </script> 

Event delegate method

IE: document.body.onload = inject; //Function inject() has been implemented before this

Firefox: document.body.onload = inject();

Some say the criteria are:

The document, the body onload = new Function (' inject () ');

Differences between the parentElement of firefox and IE(parentElement)

Internet explorer: obj.parentElement firefox: obj.parentNode

Solution: because both firefox and IE support DOM, using obj.parentNode is a good choice.

17. Cursor: hand VS cursor: pointer

Firefox doesn't support hand, but ie does support pointer

Solution: use pointer uniformly

18. InnerText works fine in IE, but not in FireFox.

Solutions:
 
if(navigator.appName.indexOf("Explorer") > -1){ 

document.getElementById('element').innerText = "my text"; 

} else{ 

document.getElementById('element').textContent = "my text"; 

} 

An invalid statement in FireFox like obj. style-height = imgobj.height

Solutions:

Obj. style.height = imgobj. height + 'px';

IE,firefox, and other browsers do different things with the table TAB. In IE, you're not allowed to assign the innerHTML of the table and tr.

Solutions:
 
//Append a blank line to the table:
var row = otable.insertRow(-1); 
var cell = document.createElement("td"); 
cell.innerHTML = " "; 
cell.className = "XXXX"; 
row.appendChild(cell); 

Padding problem

Padding 5px, 4px, 3px, 1px FireFox doesn't know how to do this,

I have to go to padding top:5px; Padding - right: 4 px; Padding - bottom: 3 px; Padding - left: 1 px;

Remove indentation from list of ul, ol, etc

The style should be :list-style:none; Margin: 0 px; Padding: 0 px;

Margin is valid for IE and padding is valid for FireFox

CSS is transparent

IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60).

FF: opacity: 0.6.

CSS rounded corners

IE: rounded corners are not supported.

FF: -z-border-radius :4px, or -z-border-radius-topleft :4px; - moz - border - the radius - topright: 4 px; - moz - border - the radius - bottomleft: 4 px; - moz - border - the radius - bottomright: 4 px; .

CSS double line bump border

IE: border: 2 px outset;

FF:
- moz - border - top - colors: # d4d0c8 white;
- moz - border - left - colors: # d4d0c8 white;
- moz - border - right - colors: # 404040 # 808080;
- moz - border - bottom - colors: # 404040 # 808080

Conclusion:

For this type of problem, it is best to use class libraries such as jQuery, Prototype, Google Closure, etc., which are compatible with all browsers.

Related articles: