Hi,
Und wenn die Line-Height gleich Null ist, dann müsste lt. Spezifikation die Höhe der entsprechenden Zeilen Box gleich Null sein?
Nein - die Höhe der Box. Der Inhalt geht trotzdem darüber hinaus.
Ah, hier kommt jetzt noch die Overflow-Eigenschaft ins Spiel.
Hier mal ein "Test-Scenario":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>line-height Test</title>
<style type="text/css">
p {
margin: 0;
padding: 0;
font-size: 1em;
line-height: 0;
border: 1px solid #ccc;
background: #f00;
}
span {
color: #000;
background: #fcc;
}
</style>
</head>
<body>
<p>
Eine Zeile Text.
</p>
</body>
</html>
Das P-Tag hat keine explizite Overflow-Eigenschaft zugewiesen bekommen. Somit ist der "Initial Value" (Ausgangswert) gleich 'visible'.
Dieses Beispiel produziert nun folgende Ausgaben:
Firefox 2.0.0.12
Opera 9.26
Internet Explorer 7
Über den IE braucht man wohl nicht viel zu sagen. Dass der Text nur _auf_ der vorhandenen Border dargestellt wird, ist wohl in keinem Fall irgendwie mit der Spezifikation in Einklang zu bringen.
Der Unterschied zwischen dem Firefox und Opera ist da schon interessanter. Opera stellt den Text _komplett_ oberhalb des Elements dar, und zwar so, dass er ggf. eben nicht mehr dargestellt wird, weil der Viewport zu Ende ist.
Der Firefox hingegen stellt den Text vertikal zentriert zum Element dar.
Es wird standardkonform eine 2px breite horitontale Linie (border-top und -bottom) dargestellt und der Text mittendrin - line-height hat ja auch die Nebenwirkung der vertikalen Zentrierung.
Also macht der Firefox es als einzigster (von den Dreien) richtig?
Weil er sich an Leading and half-leading orientiert?
Regelt die Spezifikation eigentlich das genaue Verhalten, bzw. die Umsetzung der Overflow-Eigenschaft?
Wenn man den Quellcode leicht ergänzt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>line-height Test</title>
<style type="text/css">
p {
margin: 0;
padding: 0;
font-size: 1em;
line-height: 0;
border: 1px solid #ccc;
background: #f00;
}
span.a {
color: #000;
background: #fcc;
}
span.b {
color: #000;
background: #ccf;
}
</style>
</head>
<body>
<p>
<span class="a">Eine Zeile Text, der etwas länger sein muss,</span><br /><span class="b">als diese Zeile.</span>
</p>
</body>
</html>
Dieses Beispiel erzeugt im Firefox die folgende Anzeige:
Wie man sieht, werden die Zeilen gemäß dem Line-Height Wert von Null, übereinander (also mit einem Abstand von null) dargestellt.
Ach so - sobald die Overflow-Eigenschaft den Wert 'auto' zugewiesen bekommt, zeigen übrigens alle 3 Browser nur noch die Border an.
Also so einigermaßen habe ich es jetzt kapiert. Wobei immer noch einige kleine Unklarheiten (s.o.) übrig sind.
Allerdings zeigt es auch mal wieder:
Eine Spezifikation - drei (aktuelle) Browser - drei verschiedene Darstellungen!
Aber das ist wieder ein anderes, eigenes Thema! ;-)
Gruß Gunther