Unterschiedliches Verhalten HTML 4 und HTML 5, warum?

[Rolf b]

Hallo,

ich habe beim Umschalten des DOCTYPE einer Webseite von HTML 4 Transitional auf HTML 5 einen merkwürdigen Effekt erlebt, den ich gerne verstehen würde. In einem Fiddle konnte ich das halbwegs kompakt nachstellen (-> problematische Seite). Die Farben habe ich etwas knalliger gemacht und die div-eritis der alten Seite auf semantisch geändert. Angesichts der Minimalisierung fehlt natürlich alles, was für eine Webseite sonst so nötig ist (auch hrefs bei den Links).

<header>
<nav id="mainNav">
<ul>
<li><a>Dings</a></li>
<li><a>Bums</a></li>
</ul>
</nav>
<nav id="subNav">
Hier wäre eine Sub-Navigation, die habe ich weggelassen
</nav>
</header>

header * { padding: 0; margin: 0; }
nav {
  display: inline-block; /* Ja ich weiß, inline-block ist seltsam. Ist historisch entstanden */
  width: 100%; 
  font: bold 13px Verdana,Arial,Helvetica,sans-serif;
  box-shadow: 4px 4px 4px 0px rgba(50,50,50,0.5);
}
#mainNav { background-color:#069; }
#subNav  { background-color:#fb7; }
nav ul { float:right; }
nav li { display: inline-block; }
nav a  { display: block; padding: 3px 10px; line-height:22px }
nav a:hover { background-color: red; }

Der merkwürdige Effekt besteht darin, dass die beiden nav-Zeilen im HTML 4 Transitional Modus bündig aneinander liegen, mit HTML 4 Strict oder Html 5 aber auf einmal einen Abstand von ca 5 Pixeln bekommen. Nimmt man den float:right für nav ul weg, wird er kleiner (2 Pixel).

Ein Problem scheint auf jeden Fall das display:inline-block des nav Elementes zu sein, was irgendwer in den Originalcode der Seite mal einbaute. Mache ich daraus display:block, ist der Spuk weg.

Aber trotzdem würde ich gerne verstehen, wie das zu Stande kommt. Was hat sich zwischen HTML 4 Transitional und Strict bzw. HTML5 geändert, um das zu bewirken? Kann mich jemand erleuchten?

Rolf