Encontrei um bug no IE9, mas pesquisar no Google ainda não ajudou a encontrar nenhuma solução.

O seguinte funciona bem no FF 3 + 4, Chrome, Opera e até no IE8, mas não no IE

O HTML:

<div class="outer">
    <p class="inner">Lorem ipsum dolor</p>
</div>

The CSS:

div p {
    font-size: 1.2em;
}
div p:after {
    content: " sit amet";
}

div p:after {
    font-size: 1.3em;
}
div.outer p:after,
div p.inner:after {
    font-size: 3em;
}

O "sit amet" éenorm no IE9, pois parece multiplicar o tamanho da fonte repetidamente. Não é possível substituí-lo por "! Important" ou outros meios de aumentar a especificidade (como, por exemplo, o "div.outer" já deve fazê-lo). Parece até que recebe multiplicado dentro da mesma declaração, ou seja,div.outer p:after, div p.inner:after não se multiplica por 3, mas por 9!

(Observe que as classes "interna" e "externa" não são necessárias aqui. O mesmo acontece ao declarardiv p {} de novo e de novo. Mas isso só faz sentido com as classes como um exemplo do mundo real.)

Aqui está uma página de teste:http: //dl.dropbox.com/u/4667354/temp/ie9-bug.htm

Existe alguma solução?

Editar

Para esclarecer dois mal-entendidos:

O bug énã o comportamento usual de que os elementos filhos multiplicam o tamanho da fonte de seu pai quandoem são usados. O erro é que os tamanhos das fontes no conteúdo gerado não podem ser substituídos e se multiplicará de qualquer maneira ao tentar. I.e. definindo o tamanho da fonte emdiv p:after funciona uma vez, mas definir novamente multiplica em vez de substituí-lo. Para ver melhor qual é o problema (caso você não tenha o IE9 em mãos), aqui estão duas capturas de tela da página de teste: no IE8 e em qualquer outro navegador moderno ein IE9.