Cross-browser compatibility issues

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?

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.