Cross-browser compatibility issues

Question

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?

Answer 1

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

Answer 2

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)

Answer 3

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.

Answer 4

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.