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

[MudGuard]

Hi,

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.

Angesichts der Tatsache, daß HTML 4 kein nav-Element kennt, ist das Verhalten bei HTML 4 (ob strict oder transistional) eher irrelevant.

Nimmt man den float:right für nav ul weg, wird er kleiner (2 Pixel).

evtl. collapsing margins.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Angesichts der Tatsache, daß HTML 4 kein nav-Element kennt, ist das Verhalten bei HTML 4 (ob strict oder transistional) eher irrelevant.

Die Tatsache kann aber niemals Ursache für Darstellungunterschiede sein; selbst dann nicht, wenn für nav im Autorenstylesheet kein Wert für die display-Eigenschaft angegeben wäre. Browser haben nicht einen HTML-4-Parser und einen HTML5-Parser, sondern einen einzigen HTML-Parser.

Von daher ist die Tatsache, daß HTML 4 kein nav-Element kennt, für das Verhalten irrelevant.

Und schon gar nicht kann das Ursache für Darstellungunterschiede bei HTML 4 Strict vs. HTML 4 Transitional (bzw. XHTML 1.0 Strict vs. XHTML 1.0 Transitional) sein.

LLAP 🖖

[Rolf b]

Und vor allem hatte die alte Seite div-eritis, die ich im Fiddle durch semantische Tags ersetzt hatte, und das Problem tritt in beiden Fällen auf.

Rolf

[Gunnar Bittersmann]

@@Rolf b

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?

Almost Standards Mode vs. Standards Mode.

LLAP 🖖

[Rolf b]

Den Link hatte ich selber gefunden. Zuerst dachte ich: ich verwende Firefox doch gar nicht, aber da Chrome sich mit "KHTML like Gecko" meldet, wird er das wohl nachbauen. Und dann ließ mich der Satz hier glauben, ich hätte das Szenario nicht, weil ja irgendwo doch Text im nav ist.

inline boxes that have no non-whitespace text as a child and have no border

Allerdings hat mein nav keinen eigenen Text, nur andere Block-Elemente, und das ul ist dazu auch noch gefloatet und damit aus dem normalen Flow heraus.

Das perverse ist aber, dass das Innenleben des nav eigentlich nicht Schuld sein kann. Ich habe ihm mal eine Höhe von 100 Pixeln gegeben, und der Extra-Abstand erscheint trotzdem. Der Extra-Abstand scheint von nichts ein Margin zu sein, zumindest zeigt mir das der Layout-Debugger vom Browser nicht an. Ich hatte auch schon gedacht, er würde die Zeilenumbrüche zwischen den HTML Tags irgendwie rendern (hatte mit änderen IEs schonmal diesen Effekt), aber auch das ist es nicht, der Effekt bleibt auch dann wenn ich alles bündig aneinanderklebe.

Aber - gerade entdeckt - was etwas ändert, ist ein vertical-align:top oder bottom im header-Element! (baseline ist ja der Default). D.h. das, was da unter dem nav entsteht, ist der Abstand von der Baseline zum unteren Rand der Textbox.

Ich denke, das reicht mir. Letzlich ist der display:inline-block des nav ja auch nicht das richtigste.

Rolf

[Gunnar Bittersmann]

@@Rolf b

Den Link hatte ich selber gefunden. Zuerst dachte ich: ich verwende Firefox doch gar nicht, aber da Chrome sich mit "KHTML like Gecko" meldet, wird er das wohl nachbauen.

Im Microsoft Developer Network hatte ich auch was zum Almost Standards Mode gefunden, den scheint es browserübergreifend zu geben.

Ich denke, das reicht mir. Letzlich ist der display:inline-block des nav ja auch nicht das richtigste.

Letzlich ist der Almost Standards Mode ja auch nicht das richtigste.

LLAP 🖖