Why do browsers render the same page in different ways?

Question

I would like to know why browsers read the same page (HTML, CSS and scripts) and the displayed result is different in some cases.

Answer 1

Within the browser, the party responsible for reading and interpreting HTML and CSS is called the rendering engine or rendering mechanism (in English Rendering engine), and there are several different mechanisms in the market, for this reason the page is presented differently.

It can be said that the rendering engine is one of the main components of the browser, and some rendering engines have become famous and started to be used by more than one browser.

For example, the Webkit is used by Safari (Apple), and was used by Opera and Google Chrome until recently, when it was replaced by Blink.

There are still the Javascript interpreters, whose purpose is to interpret and execute the page’s Javascript codes, and which are also reused by more than one browser, such as the V8 of Google and the Spidermonkey and the Rhino mozilla.

Answer 2

The fact that many browsers adopt different rendering mechanisms makes it one of the main reasons for this to happen, let’s see for example:

• In some browsers for example, the text fonts used are not the same, and sometimes this may even vary depending on the SO, however when a source is not specified, then it is up to the browser to decide.
• Some browsers take longer to implement certain features, in comparison to others.
• The specifications are ambiguous, and can be interpreted from different forms by the respective suppliers of these browsers - something that has reduced thanks to HTML5.
• Use of different resources by web encoders, examples can be seen the -webkit-* when using the CSS.
• Bugs

Still speaking of engines, of all browsers currently in existence, I believe that at present no one uses the same engine, whether for the layout as for the execution of scripts.

Apart from that there are several other problems that are the sole responsibility of the encoder, or almost this:

• Not everyone who programs follows the language specifications, this also applies to HTML - simple statements like <!doctype *> or the shiv that arrives more as I arrange and so on.
• Use of unstable resources depending on the environment - apply styles with js instead of css.

And several others among them. But I believe that the biggest problem is related to the structuring of the code HTML - semantics, outline, etc - and of the CSS - estates -, other than that, the rest is less I think.

References

• W3C
• Quora
• Soen