Edge and IE line break problem

Posted on:March 09 2018

Today, I found a very simple inconsistency between browsers, causing a major PITA for me. Assume this simple code:



<!DOCTYPE html>

<html>

<body>

  <span style="font-size:50px;">LINE 1<br/></span>

  <span style="font-size:14px;">line 2</span>

</body>

</html>

Which will look like this in most browsers:

But in internet explorer and edge, it will look like this

Interestingly enough, if you remove the DOCTYPE tag, both browsers will do the same. But I still don't understand why this happens.

Problems like this make it really fun to develop a website editor.

Comments:

Without warranty of accuracy or applicability: I think that one of the many HTML specs somewhere mentions a kind of "auto-repair" where inline tags that contain block tags are wrapped in virtual block tags. The break might cause just that, and then there might be some difference in interpretation of the resulting kind of empty virtual div following it, or at least it puts the box height calculation off track in different ways depending on the browser.

The behavior with DOCTYPE is probably even more miraculous, as like that there is neither public nor system identifier, so some browser-specific default might apply, and without the DOCTYPE another one might, so even when there are consistent parsing rules for a particular HTML version the DOCTYPE might select different versions maybe.

Probably not too helpful as quite vague, but maybe it helps.

xaos

Quote
2018-03-19 15:34:00

So... after some looking into that: It appears that Edge inserts a zero-width flow box after the br, which is then computed to have a height according to the span attributes (thus 50px), and a corresponding base line offset. Then the second span adds smaller text to that line, and hence line 2 is somewhat higher than it has to be. Whether or not it is correct in doing so is beyond me, and I don't want to look it up either - both behaviors have strange side effects:

* In non-Edge adding more text after the
(but before span end) will lead to line height of line 2 suddenly growing to accommodate the new content in its huge size.
* In Edge the line will be of this size already, but this looks awkward when there is no content.

The discrepancy appears to go away when putting
between the spans, which also does appear the more logical position to me.

Btw. Textile appears somewhat broken?

xaos

Quote
2018-03-20 08:16:00