Das ist ja mal ein interessanter Browser- Bug – mindestens “Prädikat: sehenswert” ;-)
Welcher Browser ihn verursacht ist schnell erraten: der Microsoft Internet Explorer, diesmal sogar inkl. Version 7!
Es geht hauptsächlich um die eher harmlose Eigenschaft “letter-spacing”. In Verbindung mit “floatetenden Elementen” entwickelt es sich aber zu einem explosiven Gemisch…
Fallbeispiel (sinnfrei, aber übersichtlich):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
body {letter-spacing:0.5em;}
p {float:left; margin-right:15px;}
</style>
</head>
<body>
<p>links 1</p><p>rechts 1</p><br />
<p>links 2</p><p>rechts 2</p><br />
<p>links 3</p><p>rechts 3</p><br />
<p>links 4</p><p>rechts 4</p><br />
<p>links 5</p><p>rechts 5</p><br />
</body>
</html>
Es sind dies also jeweils zwei nebeneinander liegende Element, darunter wieder zwei….
Mittels “letter-spacing” aus dem Mutter- Element soll der Text etwas “aufgelockert” werden.
So weit, so gut, so einfach! Interessant wird es aber wenn man dieses simple Beispiel in einem Microsoft Internet Explorer betrachtet: da sind nur mehr die “ungeraden Zeilen” – also “links 1/3/5″ und “rechts 1/3/5″ – zu sehen, der Rest ist verschwunden!
Eine Fehlersuche nach dem “Reduktions- Prinzip” (Zeile für Zeile löschen und schauen was passiert) war der Schuldige bald eruiert: das “letter-spacing” im “body” treibt die Redmonder zu solch irren Darstellungen. Aber “letter-spacing” ist Vorgabe, mh, was tun?
“Letter-spacing” nur im “p”- Element verursacht keine Probleme – bleibt nur mehr der “br” (break) über. Und siehe da: aufgehobenes “letter-spacing” für den Break (”br {letter-spacing:0;} “) biegt alles wieder gerade.
Danke liebe Jungs von Microsoft, danke für die verschwendete, aber doch vergnügliche Zeit bei der Fehlersuche…
