Edge and IE line break problem

Today, I found a very simple inconsistency between browsers, causing a major PITA for me. Assume this simple code:
<!DOCTYPE html>
  <span style="font-size:50px;">LINE 1<br/></span>
  <span style="font-size:14px;">line 2</span>
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.

No comments yet:

Remember personal info?
Email (optional):
URL (optional):
Enter "layered" (antispam):
Comment:Emoticons / Textile

  ( Register your username / Log in )

Notify: Yes, send me email when someone replies.  

Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.
Note: If you type in your email adress above, it will be visible to other visitors, although it will be hidden for bots using javaScript.