1

Given this fiddle https://jsfiddle.net/2pct6pbv/2/ , why is the bellow div/span (screenshots) not acting in the same way - meaning the div should have a 24px height (line-height * font-size from body) while the span should have 0px height (check screenshot #2, bottom right chrome inspector)

EDIT: I've added a last screenshot with basically everything stripped down to be similar to the jsfiddle. I have no idea what else to try to reproduce the issue.

body {
  line-height: 1.5;
  font-size: 16px;
}

div {
  background-color: red;
}

span {
  display: inline-block;
}

I tried everything to make it behave the same way but it doesn't seem to work. In another page, with the exact same CSS, it seems to behave normally.

Any thoughts?

SPAN DIVenter image description here

parent-parent

dumb html

Andrei Gabreanu
  • 144
  • 1
  • 9

1 Answers1

1

I found that in the jsfiddle a <!DOCTYPE html> is included in the source, while your code is probably missing it.

This doctype specifies that the document markup is compliant to the html version 5 and should be processed like this, based on the W3 recommendations, aka, the no quirks mode.

Without the doctype, the quirks mode is triggered and the browser can process some elements in a custom way. So, I think in the W3 recommendations the span height is calculated even if it has no content, while in the quirks mode it seems to be processed just if there were any content inside.

Community
  • 1
  • 1
Felypp Oliveira
  • 2,147
  • 1
  • 17
  • 17
  • while I am 100% sure the source code does have the doctype set to HTML5 (I have it in front of me - the chrome inspector just doesn't show it for some reason (?) ) - changing it from HTML5 to HTML4 or some other was the only way to reproduce the issue in JSFiddle. Thus, I will try to reproduce it locally in the project and come back with an answer here tomorrow. Thanks for the answer. – Andrei Gabreanu Jan 17 '16 at 05:46
  • @AndreiGabreanu I run the code in my Firefox with and without the DOCTYPE... it worked like in the fiddle with the DOCTYPE... it worked like your screenshots without the DOCTYPE. Actually, your screenshots don't show any DOCTYPE in the page... at least in the dev tools on Firefox it is shown if one was declared. – Felypp Oliveira Jan 17 '16 at 05:49
  • It seems that indeed I was missing the doctype but in a weirder way. A Grunt plugin - via some weird regex - was overriding the html5 doctype from the end document and adding a weird char. This meant that the browser considered the doctype invalid and thus rendered in quirks mode. – Andrei Gabreanu Jan 17 '16 at 13:54