title: IE9 bug with increased font-size of css content
body: <p>I have found a bug in IE9 but googling for it hasn't helped finding any solution yet.</p>
  
  <p>The following works fine in FF 3 + 4, Chrome, Opera and even IE8, but not in IE9.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;p class="inner"&gt;Lorem ipsum dolor&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>The "sit amet" is <strong>huge</strong> in IE9, as it seems to multiply the font-size again and again. It's not possible to overwrite it with "!important" or other means of increasing the specificity (as e.g. the "div.outer" should already do it). It even seems that it gets <strong>multiplied within the same declaration</strong>, i.e. <code>div.outer p:after, div p.inner:after</code> won't multiply by 3, but by 9!</p>
  
  <p>(Please note that the "inner" and "outer" classes are not necessary here. The same happens by declaring <code>div p {}</code> again and again. But it makes only sense with classes as a real-world example.)</p>
  
  <p>Here is a test page: <a href="http://dl.dropbox.com/u/4667354/temp/ie9-bug.html" rel="noreferrer">http://dl.dropbox.com/u/4667354/temp/ie9-bug.html</a></p>
  
  <p>Is there any solution?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>To clarify two misunderstandings:</p>
  
  <ol>
  <li>The bug is <strong>not</strong> the usual behaviour that child elements multiply the font-size of its parent when <code>em</code> are used. The bug is that <strong>font-sizes in generated content cannot be overwritten</strong> and will multiply anyway when trying to. I.e. setting the font-size in <code>div p:after</code> once works, but <strong>setting it again multiplies instead of overwrites it</strong>.</li>
  <li>To better see what the problem is (in case you don't have IE9 at hand), here are two screenshots of the test page: <a href="http://dl.dropbox.com/u/4667354/temp/ie9-bug_ie8.png" rel="noreferrer">in IE8 and any other modern browser</a> and <a href="http://dl.dropbox.com/u/4667354/temp/ie9-bug_ie9.png" rel="noreferrer">in IE9</a>.</li>
  </ol>