Cascading Style Sheets { Internet Explorer : Beispiel "Line-Height Bug" }

Internet Explorer, Beispiel "Line-Height Bug"

Ein Absatz innerhalb eines Containers. Die Zeilenhöhe ist mit 100 Pixel deklariert, die Texthöhe durch einen span mit rotem Rand erkennbar gemacht. Oberhalb und unterhalb der Grafik erkennt man im IE 6 deutlich, dass die Zeilenabstände nur halb so hoch sind. Dieser Fehler tritt mit allen Grafiken auf - es liegt nicht am Joint.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eu magna nec leo porta imperdiet. Nullam accumsan ipsum non ipsum. Nunc nulla purus, tincidunt ut, rhoncus vitae, ornare ut, lacus. Mauris elementum eros quis tellus. Donec diam nibh, sollicitudin id, bibendum eget, fermentum sodales, metus. Fusce id odio. Integer porttitor luctus ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ultricies lorem ac est. Nulla placerat augue a sem. In dapibus sollicitudin nulla. Nunc hendrerit, erat ut tincidunt cursus, nulla risus cursus turpis, nonummy iaculis arcu nibh sit amet velit. In mauris. Etiam posuere pretium ligula. Pellentesque euismod libero eget massa. In hac habitasse platea dictumst. Sed eu pede id enim ultricies accumsan. Nullam accumsan.

Der folgende Container gleicht dem oberen mit einem Unterschied: hier wurden mit Hilfe des *-HTML-Selektors oben und unten Außenabstände an der Grafik angebracht.

Das Style-Sheet sieht so aus:

div.container {
    background-image: url(//graphics/grid2.gif);
    background-color: #fefeff;
    padding: 0;
    border: 2px solid navy;
    margin: 0;
    }
p.big-lines, p.big-lines-2 {
    font-size: 20px;
    line-height: 100px;
    padding: 0;
    border: none;
    margin: 0 50px;
    }
* html p.big-lines-2 img {
    margin: 40px 0;
    }

Das HTML für die Container sieht so aus:

<div class="container">
    <p class="big-lines"><span>Lorem ipsum ... <img ... /> ... </span></p>
</div>
<div class="container">
    <p class="big-lines-2"><span>Lorem ipsum ... <img ... /> ... </span></p>
</div>

Internet Explorer, Beispiel "Line-Height Bug"

Internet Explorer, Beispiel "`Line-Height` Bug"