DEV Community

Duck Programmer
Duck Programmer

Posted on

Why Does Your Website Look Different In Different Browsers?

The Role of Browser

The main function of a browser is to present the user's selected web resources, such as html documents, pdfs, images and so on, by requesting the server to display them in a browser window.
For some documents like html, css need to be interpreted by the rendering engine in the browser.

Reason of Difference

Different browsers have different rendering engines and often interpret source code like HTML and CSS in slightly different ways, so that website looking can be different or not be displayed properly.

Difference in Box

In CSS, each element, such as div, h, p and etc., has a concept of box. A box consists of, from the outside, margin, border, padding and content like text or image.

box {
    width: 400px;
}
Enter fullscreen mode Exit fullscreen mode

Sometimes you might define the width of the content like above, and W3C box model, which is the the main international standards organization for the World Wide Web, defines the width as content width while the Internet Explorer box model, which is one of the major browser and installed in windows computer since the beginning, defines width as content + padding + border.

box interpret

DOCTYPE

You must have seen the code like below if you have the experience coding html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Enter fullscreen mode Exit fullscreen mode

or

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

DOCTYPE is a declaration of the DTD, which stands for "Document Type Definition" and not an HTML tag.

HTML is a language based on SGML (Standard Generalized Markup Language) and the DOCTYPE declaration and DTD are derived from SGML.
Many web browsers display documents in different ways such as standard-compliant mode and compatibility mode depending on the presence or absence of the DOCTYPE declaration and its content. This switching of the display method is called DOCTYPE switch. A simple explanation of how the DOCTYPE switch works is that if a DOCTYPE declaration is not placed at the beginning of an HTML sentence, it will be adapted to an older version of the browser's display.

HTML5 is no longer a language based on SGML. Therefore, unlike the language used up to HTML4, no DTD is required. However, the DOCTYPE declaration itself is still required in HTML5 since the DOCTYPE switch allows the browser to operate in standards-compliant mode.

doctype

Further Knowledge

If you want to know more about the browser, click here to access the best resource that I think.

If you can't click the text link above, copy and paste the URL below into your internet browser:
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Top comments (0)