IE/Win problems with pseudo-elements

IE/Win has several problems with pseudo-elements, like first-letter: when the element they are applied to has children many wrong behaviors may occur.

In all the following test cases there is a box with grey border, yellow background, padding, containing some text. A red first-letter rule is applied. Further elements and/or properties are then applied as described in the table headers.

yellow box has: left margin [1] left margin [2] width and left margin [2] left margin [2], NO first-letter
simple text

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

first letter wrapped in a span

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

first two letters wrapped in a span

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

second letter wrapped in a span

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

third letter wrapped in a span

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

part of the text wrapped in a span

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

The span element which is present in some cases has an aqua background
[1] a left margin is applied with a class on the box
[2] a left margin is applied with a class on the cell containing the box, using a descendant rule

In IE7-/Win some of the properties applied to a box having a first-letter property seem to be applied also to children element (if present) “near” to the target letter. Border, margin, padding (background ?) seem at least partially “inherited”. But the behavior is rather unstable: there are other problems, irrelevant variations in the rules that define the properties give different results, and some variants lead IE to crash. See also IE7 first-letter problem.

Other IE problems with pseudo-elements pseudo-class, pseudo-element, pseudo-CSS by Ingo Chao

CSS tests home