In seltenen Fällen kann es vorkommen, dass die Darstellung im Quirks Mode die richtige Darstellung ist. Aufgrund von Bugs in der Rendering Engine kann es im Standards Mode zu Fehldarstellungen kommen:
Sollten Sie Informationen über den sogenannten Box-Model-Bug suchen, so gehen Sie bitte auf die Seite »Der CSS-Box-Model-Bug«.
:first-letter
und :first-line
.Das Problem tritt immer dann auf, wenn nach den genannten Pseudoelementen kein »Whitespace« (Leerzeichen, Zeilenumbruch, etc.) notiert wird. Dabei ist es egal, ob nach einem Pseudoelement weitere mit Komma abgetrennte Selektoren folgen oder die öffnende geschweifte Klammer des Deklarationsblockes folgt.
p:first-letter{
/* diverse Formatierungen */
}
p:first-line, div {
/* diverse Formatierungen */
}
Auch wenn die CSS-Spezifikation kein Whitespace nach Selektoren erfordert, sollte nach den problematischen Pseudoelementen immer mindestens ein Leerzeichen notiert werden.
p:first-letter {
/* diverse Formatierungen */
}
p:first-line , div {
/* diverse Formatierungen */
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>DOCTYPE-Switch: Bugs - Pseudoelemente werden ignoriert</title>
<style type="text/css">
p.absatz1:first-letter{
font-size:1.5em;
color:#009;
}
p.absatz1:first-line{
background-color:#ddd;
}
p.absatz2:first-letter {
font-size:1.5em;
color:#009;
}
p.absatz2:first-line {
background-color:#ddd;
}
</style>
</head>
<body>
<p class="absatz1"> <!-- Inhalt des Absatzes --> </p>
<p class="absatz2"> <!-- Inhalt des Absatzes --> </p>
</body>
</html>
:first-child
und die Pseudoelemente :before
und :after
ignoriert, lässt sich auf diese Weise leider nicht beheben, da der Internet Explorer diese Selektoren schlicht nicht beherrscht.Letzte Änderung des Inhaltes: 17.07.05