I see that many people have problems with cross-browser compatibility issues.

My question is why do browsers render the html, css or js differently?

Is it due to the DOM? The box model?

Why are there cross-browser compatibility issues when there are standards from W3C etc?

Are there any differences in the way the major Internet browsers display HTML content? Why is it that Internet Explorer, Firefox (Mozilla), Opera may display the same content differently?

What should I keep in mind when building a cross-browser compatible web site?

I see that many people have problems with cross-browser compatibility issues.

My question is why do browsers render the html, css or js differently?

Is it due to the DOM? The box model?

Why are there cross-browser compatibility issues when there are standards from W3C etc?

Are there any differences in the way the major Internet browsers display HTML content? Why is it that Internet Explorer, Firefox (Mozilla), Opera may display the same content differently?

What should I keep in mind when building a cross-browser compatible web site?

• javascript
• html
• browser

• Even if you emphasize your questions, the answer is: because different browsers are different. For the last question I think davidsulc gave a good answer. – deceze ♦ Commented Nov 29, 2010 at 0:11
• 1 what s different? parser? DOM? box model? – DarthVader Commented Nov 29, 2010 at 0:34
• 1 @user177883 - Yes. All of them. Plus rendering code, scripting language, internal architecture and everything else that goes to make up a browser. - In fact the most remarkable thing about the browsers is how similar they are. – Alohci Commented Nov 29, 2010 at 0:51
• @user177883 Microsoft just didn't care about standards for the most of the past. Now they are working on IE9 which is a big improvement over the part versions. – Šime Vidas Commented Nov 29, 2010 at 1:00
• @Šime Vidas - I think that is rather unfair. If you look at the acknowledgement sections of the HTML and CSS W3C specs you will find Microsoft names in almost all of them. We should not forget that IE6 was once the most advanced, standards compliant browser available. It was just that for commercial reasons, MS stopped progress at IE6, and when they finally realised they needed they needed to start again, floundered badly. – Alohci Commented Nov 29, 2010 at 1:31

5 Answers 5

There are a lot fof reasons or incompatibility:

• Specs are often written in response to the development of propriety features by specific vendors,
• Specs can sometimes be poorly written, have ambiguity or were not written in anticipation of specific end-use cases.,
• Browser vendors occasionally ignore the specification for their own reasons.

Additional factors:

• A lot of this stuff is hard to implement, let along implement correctly,
• It also has to be implemented to handle poorly formed HTML, backwards compatibility etc. Browser vendors sometimes sacrifice 'correctness' for 'interoperability',
• History, politics & personalities.

I'm sure someone will answer this much better, but here's a start:

Yes, there are standards that are supposed to be adhered with respect to CSS rendering. The problem is, some browser editors (cough Microsoft cough) don't consider it a priority to implement the specifications correctly (or even fully, for that matter). Even, when the layout engine is being worked on to attempt to ensure compatibility, it can get quite nasty figuring out how things should be rendered correctly when mixing various CSS properties and units (see for example, the ACID test http://en.wikipedia.org/wiki/Acid3)

To have a cross-browser website, you'll basically have to check all of your website's pages render correctly in the browsers your visitors use (or that you support). Various tools such as Selenium (seleniumhq.org) can help with this.

You basically have to decide what you're going to do

• design for the lowest common denominator (if it's IE6, there isn't much you'll be able to do)
• design using validating CSS and using hacks (e.g. clearfix) to correct erroneous behavior in certain browsers
• decide not to support certain browsers (IE6 being a prime candidate)
• sniff browser and adapt display accordingly (NOT the preferred way to do it)

With respect to differences in manipulating the DOM, libraries such as jQuery help a lot as they hide the implementation differences from you.

For reference, it's a good idea to test your website in at least the following:

• WebKit-based browser (Chrome, Safari)
• Gecko-based browser (Firefox)
• IE
• Opera

It is an aftermath of the Great Browser War. Now Netscape Communications lies in ruins, but quirks opponents made to outperform each other is still remains in browsers' codebase, and people are still in development team. Consider watching Crockford's lecture, he gives some highlight on subject. (you will want to save the file instead of streaming it)

Everything that Hamish said, plus another major problem that he alluded to is how browsers handle incorrect HTML. For example, back in the days of IE4/NS4, the element was very problematic. If you didn't close a tag, IE4 would close it for you. Netscape 4 would silently disregard the table completely.

This is still true today where one browser will fix incorrect markup differently than another. Yes, the markup should be corrected, but browsers will try their best to render something.

The standard specifies how HTML/CSS markup should be rendered into displayed as visual elements. It does not specify how the rendering should work specifically. Many different people and companies have created different ways of rendering markup visually. Since HTML rendering is an extremely complex task, of course they didn't all converge on the exact same solution. All rendering engines are aiming for the same goal, but often the spec is vague enough to allow for small differences (be it just pixel level), and bugs are inevitable as well.

Add to that that back in the days browser vendors cared less about standards and more about gaining market share quickly and that certain companies have been very slow in turning around to embrace standards (you know who you are).

In the end, specs, which are quite complex, and browsers, which are even more complex, are written by many different people; you can't expect absolute perfection to arise from this process. And perfection is not the goal of HTML either; it's meant to be a simple, vendor and platform independent markup language to present information on a variety of devices, something it does remarkably well. If you need pixel perfect results, you need to go with a technology that was meant to provide this, like Adobe Flash (which is neither platform nor vendor independent nor simple).

Try to look at it from the glass-half-full perspective: Thousands of different people have written millions of lines of code doing vastly different things on many different platforms with many different goals and focuses, and yet in the end all render HTML markup almost identical with often only tiny, virtually irrelevant differences. There are of course weak spots in every engine and if you happen to hit them all at once, your site will break in every browser in different ways. But this is possible to avoid with a bit of experience.