Alright, so I just played around with Chrome and Firefox, and they definitely have discrepancies at the root level, and seem not to follow a common standard.
This is my simple foo.html file:
<style>
html { background-color: rgba(255, 0, 0, 0.5); }
body { background-color: rgba(0, 255, 0, 0.5); }
div { background-color: rgba(0, 0, 255, 0.5); }
</style>
<div>hello</div>
This is the output in Chrome:
And the output in Firefox:
Not only do the layouts differ, but the colors differ! Both engines apply margin: 8px; display: block to the <body> (keep this styling in mind for later, down below).
But that’s not all! There is a strange difference in how Firefox’s layout engine rules differ from Chrome’s with respect to <html> and <body>. Let me explain…
The following screenshots shows that <html> in Chrome takes up full size of the window (I am hovering on it in element inspector and it tints the whole page blueish, and shows the window size):
The following Chrome screenshot shows that <body> takes up full width/height of the <html> element:
Now in Firefox, the <html> element apparently does not take up the full window size, but rather it wraps the natural size of the body that contains the div:
Despite this, note that the entire window is colored with the red-ish color defined by the CSS, which is strange; the background leaks out of the <html> element.
Now the following screenshot shows that the <body> element wraps the <div>, unlike Chrome (thus the root elements seem to have differing default styles), and hence it makes sense that we don’t clearly see the <body>'s green color in Firefox (unlike the <html> element’s leaky background):
TLDR: The browsers clearly have differences.
Even as an experienced web developer, this is totally confusing.
Can’t we fix this? Is there not a spec that browsers should follow here?
