I had the same problem with one of my sites.
i found this answer here:
“With an HTML5 doctype, images receive what seems to be the line-height attribute which text normally gets, and thus you get a “margin” underneath them. You can either set them to display:block or line-height:0, although I haven’t tested the latter enough to be sure it’s a good fix.”
I applied the line-height:0 to the <div> which contained the navigation images. It did the trick for me.