What are the typical reasons Javascript developed on IE fails on Firefox?

I often suffer from the problem opposite what's described in this post. That is, I've got code in a legacy application designed only for Internet Explorer and I need to get it to work in Firefox.

For example, I recently worked on an app that made heavy use of manually simulating click events, like this:


...which completely broke the application in Firefox. But you wouldn't find that information in the answers to the other question, because that's not something you'd ever even attempt if your app first targeted Firefox.

What other things should a developer updating a legacy IE-only application look for when migrating to modern browsers?


Here's what my previous research uncovered. I've seen each of these issues prevent a real-world application from working in Firefox. Please feel free to edit.


document.createElement should take only a tag name, but IE lets you pass arbitrary HTML (with attributes, etc)

document.getElementById should only find elements with the given id, but IE also returns elements with the given name

IE creates implicit global variables for DOM elements, but referencing an element this way in Firefox produces the following warning:

"Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead."

IE's document.all is a collection of all elements in the document. It is not supported by Firefox.

An Element's text in IE is retrieved using the innerText property. Firefox calls this property textContent.

IE allows items in collections to be referenced using function syntax (i.e. with parentheses) instead of the normal array indexing syntax (i.e. with brackets). For example, the following works in IE: document.forms(0). Firefox does not support this usage.

HTMLTableElement rows and cells should refer to HTMLCollections, but IE allows them to be called as functions; Firefox does not.

IE defaults insertRow's index to -1; Firefox errors if the argument is omitted.

The Node.text property is IE-only


window.event is an IE-specific way to access event information; it's not supported by Firefox.

Events are attached to Elements in IE using attachEvent. Firefox uses addEventListener. Note, also, that the names of events are subtly different in each browser.

In IE it's possible to get the mouse position from non-mouse events, but it's not in other browsers. In addition, the names of the mouse-coordinate properties are not the same in IE and Firefox.

IE supports a click method for triggering the onclick event on HTML elements. No such function exists in Firefox.


Firefox splits text nodes into 4096-char blocks; IE does not. This means that things like childNodes will be different in IE and Firefox.

Internet Explorer defines a parseError.errorCode property on XMLDocuments for detecting parser errors. Firefox loads an XML document that contains error information in the document with documentElement.nodeName=="parsererror".

IE ignores whitespace in XML; firstChild always returns the first ELEMENT_NODE

The Node.xml property is IE-only

Further reading

You should note that Microsoft has a problem with making their own version of everything, and naming it after themselves.

Need Your Help

Design patterns to avoid

design-patterns anti-patterns

A lot of people seem to agree, that the Singleton pattern has a number of drawbacks and some even suggest avoiding the pattern entirely. There's an excellent discussion here. Please direct any comm...

MVC4 - Bundling does not work when optimizations are set to true

c# asp.net asp.net-mvc asp.net-mvc-4 asp.net-optimization

I wonder what I don't do correct here. I am using ASP.NET C# MVC4 and I want to take use of new css/js optimization feature.