Why do browsers render the same content differently?

by Aaron Boodman

There are many reasons:

In some cases, browsers are permitted by the spec to do what they want. For example, the default font is not mandated by the spec, so it's 
legitimate for different browsers to render text with no font specified differently.

Not all browsers have the same capabilities. For example, a browser might not have implemented the latest spec or spec proposals yet.

Sometimes the specs are ambiguous, and browser vendors interpret the ambiguities differently (thankfully this is becoming less common since HTML5 
turned into a more open-source-style and community-driven project).

Sometimes for legacy reasons, browser vendors choose to ignore the spec. For example they may have implemented a feature before it was specified, 
then the spec came out subtly different. But by that time, they already have lots of code in the wild depending on their behavior. In this case, 
it will be hard for them to justify changing their behavior to comply with the spec. This again was more of a problem in the past, before there 
were well-understood ways to ship experimental features ahead of specification.

Sometimes web developers use features that are non-standard. For example, it is extremely common to find CSS in the wild that uses -webkit-* 
extensions.

Sometimes web developers use features in an illegal or incorrect way and browsers recover from the error differently.

Bugs!

I think this can all be boiled down to the fact that the web platform (html, css, javascript, dom, etc) is insanely complex. Thousands of man-years 
go into building a browser rendering engine. It's just not possible to have multiple independent teams working on software projects this large and 
have them come out exactly the same.

Though it's frustrating for developers, a robust competitive landscape for rendering engines is good for the web long term. No one organization can 
decide to stop developing the web, or to take it in a bad direction.