Cross-browser differences started with the "browser wars" in the late 90s between Netscape Navigator and Microsoft Internet Explorer.
Netscape Navigator had become the most used web browser trhough the web and Microsoft had licensed Mosaic to create Internet Explorer 1.0. New versions of Netscape Navigator and Internet Explorer were released at a rapid pace over the following few years. Due to the intense competition in the web browser market, the development of these browsers were fast-faced and new features were added without any coordination between vendors. The introduction of new features often took priority over bug fixes, resulting in unstable browsers, fickle web standard compliance, frequent crashes and many security holes.
[edit] Creation of W3C and Web Standardization
The World Wide Web Consortium (W3C), founded in 1994 to promote open standards for the World Wide Web, pull Netscape and Microsoft together with other companies to develop a standard for browser scripting languages called "ECMAScript". The first version of the standard was published in 1997. Subsequent releases of JavaScript and JScript would implement the ECMAScript standard for greater cross-browser compatibility.
After the standardization of ECMAScript, W3C began work on the standardization of Document Object Model (DOM), which is a way of representing and interacting with objects in HTML, XHTML and XML documents. DOM Level 0 and DOM Level 1 were introduced in 1996 and 1997.
Only limited supports of these were implemented by the browsers, as a result, non-conformant browsers such as Internet Explorer 4.x and Netscape 4.x were still widely used as late as 2000. DOM Standardization become popular since the introduction of DOM Level 2, which published in 2000. It introduced the "getElementById" function as well as an event model and support for XML namespaces and CSS. DOM Level 3, the current release of the DOM specification, published in April 2004, added support for XPath and keyboard event handling, as well as an interface for serializing documents as XML.
If you're going to start with IE in your development, or at the very least check your layout in IE early on, then you should understand what things Internet Explorer (usually versions 6 & 7) has problems with, or what its limitations are.
A detailed discussion of every possible problem that can occur in Internet Explorer, and a list of all of its CSS compatibility issues is certainly beyond this article. But there are some fairly significant inconsistencies and issues that come up in relation to IE that all CSS developers should be aware of. Here is a rundown of the most common problems you'll need to deal with:
* IE6 will become problematic if floats are overused, causing (paradoxically) disappearing content or duplicate text
* IE6 will double the margin on floated elements on the side that is the same direction as the float; setting display: inline will often fix this
* In IE6 and IE7, if an element doesn't have layout, it can cause a number of problems, including backgrounds not showing up, margins collapsing improperly, and more
* IE6 does not support min- and max-based CSS properties like min-height, or max-width
* IE6 does not support fixed positioning of background images
* IE6 and IE7 do not support many alternate values for the display property (e.g. inline-table, table-cell, table-row, etc.)
* You cannot use the :hover pseudo-class on any element in IE6 except an anchor (<a>)
