Problem mit z. B. "line-height:0.95em;" im IExplorer
JXR
- css
Hallo SelfHTML-Forum,
ich baue grade an einem Entwurf.
Ich habe mich entschlossen diesmal keine festen px-Größen für Schriften zu verwenden, sondern auf em umzusteigen.
Ich teste das Ergebnis in 3 Browsern: IE6 (Win2000), Firefox (Win2000) und Opera (Win2000).
XHTML + CSS (DT so gewählt dass der IE nicht im Quirksmodus, soweit ich weiß).
Mir ist klar dass em eine relative Größe ist. Dennoch hätte ich ganz gern dass alle browser in der Default-Einstellung ein gleiche Schriftgröße anzeigen. Wenn der User diese skaliert, verändern sich alle mit em versehenen Objekte und das soll auch so sein.
Alle Browser habe ich so eingestellt dass die Schriften die default-Einstellung nutzen (beim IE Schriftgröße: "mittel"). Das dürfte soweit ich dass gelesen habe bei allen 16px sein. Jedenfalls wenn ich dem Text sage "Du bist 0,7em" ist er in allen 3 Browsern gleich groß (11px hoch, wenn ich einen Screenshot mache und nachmesse). Soweit so gut.
Nun möchte ich eine line-height und gebe diese mit 0.95em an.
Opera udn Firefox machen genau das was ich erwarte.
Der IE nicht! Dort fällt der Zeilenabstand ärgerlicherweise viel kleiner aus. Das ist schlecht!
Gibt es irgendwelche Tricks die ich beachten muss? Was kann ich tun um diesen Bug zu umgehen. Oder mache ich irgendeinen Fehler?
Wenn es bei der Schriftgröße so passt wie ich das mir vorstelle müsste doch der Zeilenabstand ebenfalls passen. Daher gehe ich davon aus das der IE spinnt!
Weiß jemand Rat?
Vielen Dank!
Noch ein bischen Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
<!--
body
{
margin:0px;
padding:0px;
padding-top:30px;
font-family: verdana,arial,geneva,helvetica,sans-serif;
background-color:#D3D3D3;
}
.test1
{
font-size:0.7em;
line-height:0.95em;
background-color:red;
}
-->
</style>
</head>
<body>
<p class="test1">Test Rafgenducks<br />Der schnelle braune Fuchs springt über den faulen Hund. Der schnelle braune Fuchs springt über den faulen Hund. Der schnelle braune Fuchs springt über den faulen Hund. Der schnelle braune Fuchs springt über den faulen Hund.<br />Der schnelle braune Fuchs springt über den faulen Hund. Der schnelle braune Fuchs springt über den faulen Hund. Der schnelle braune Fuchs springt über den faulen Hund. Der schnelle braune Fuchs springt über den faulen Hund. Der schnelle braune Fuchs springt über den faulen Hund</p>
</body>
</html>
Hi,
Nun möchte ich eine line-height und gebe diese mit 0.95em an.
Du möchtest tatsächlich, dass die Zeile kleiner ist als die darin enthaltene Schrift? Üblich für line-height sind 1.2em bis 1.3em.
Opera udn Firefox machen genau das was ich erwarte.
Der IE nicht! Dort fällt der Zeilenabstand ärgerlicherweise viel kleiner aus. Das ist schlecht!
Welches Ergebnis genau hast Du erwartet, und was liefert der IE statt dessen?
Cheatah
Du möchtest tatsächlich, dass die Zeile kleiner ist als die darin enthaltene Schrift? Üblich für line-height sind 1.2em bis 1.3em.
Dann habe ich irgendwo ein Verschachtelungsproblem...
Denn in der komplexeren Testseite, aus der ich dieses Beispiel gebaut/entnommen habe ist der Zeilenabstand mit 0.95em > als 95% der Schriftgröße. Ca. 136%.
Nun möchte ich eine line-height und gebe diese mit 0.95em an.
Warum dies? Willst du, dass die Zeilen übereinandergedruckt werden?
0.95em bezieht sich bei line-height auf die Schriftgröße der Schrift, die gedruckt wird. Bei font-size bezieht sie sich auf die Schriftgröße, die im Elternelement definiert ist.
Du vergleichst also Äpfel mit Zwiebeln.
Und außerdem: Hälst du es für sinnvoll, einer Schrift nur 95% der Schriftgröße zu geben?
Lies z.B. mal http://forum.de.selfhtml.org/archiv/2006/5/t130368/
Ja, Danke.
Da hab ich mich von diversen Quellen die nicht ganz korrekt waren zu einem Missverständnis hinreißen lassen.
Das hat jedenfalls geholfen.