Added pixels when changing doctype from HTML 4 to 5

Question

I have a navigation bar and when I'm changing the doctype from HTML 4 to HTML 5 it adds around 7 pixels of height to my bar.

This is the code that works for me (doctype xhtml 1.0 transitional)

http://jsbin.com/qowafifu/1/edit?html,output

When i change the doctype to HTML 5 the height of the nav ul bar has added pixels

http://jsbin.com/parigera/1/edit?html,output

What is causing this, and what's the best way to fix it?

Answer 1

with doctype (doctype xhtml 1.0 transitional)

it wont interpret the <nav> tags

Answer 2

I don't know exactly why it's happening, but it seems to be the combination of inline-table and float:left. If you remove display: inline-table from nav ul it will look the same, or you can change float: left to display: table-cell on nav ul li.