IE9 error with increased font size of css content
I found a bug in IE9, but googling for it hasn't helped find any solution yet.
The following works fine in FF 3 + 4, Chrome, Opera and even IE8, but not IE9.
HTML:
<div class="outer">
<p class="inner">Lorem ipsum dolor</p>
</div>
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;
}
"sit amet" is huge in IE9 as it seems to multiply the font size over and over again. You cannot overwrite it with "important" or other means of increasing specificity (for example, "div.outer" should already do this). It seems like it gets multiplied by the same declaration , i.e. div.outer p:after, div p.inner:after
will not multiply by 3, but by 9!
(Note that "inner" and "outer" classes are not needed here. The same thing happens by declaring div p {}
over and over, but this only makes sense with classes as a real world example.)
Here is a test page: http://dl.dropbox.com/u/4667354/temp/ie9-bug.html
Is there any solution?
Edit:
To clear up two misunderstandings:
- The error is not the normal behavior in which the child elements is multiplied by the size of the font of its parent using
em
. The error is that the font size in the generated content cannot be overwritten and will multiply when attempted. That is, setting the font size todiv p:after
is done once, but adjusting it is multiplied again rather than overwriting it . - To better understand what the problem is (if you don't have IE9 on hand), here are two screenshots of the test page: in IE8 and any other modern browser and in IE9 .
source to share
You can try using rem
instead em
, IE9 supports it , then your sizes will be relative to the base font instead of multiplying together. Here's a good explanation .
I would guess the difference is that IE9 treats the generated content as a child, while other browsers are not, therefore, multiplication.
source to share
This one might have something to do with the difference between the rendered DOM trees from IE8 to IE9.
Internet Explorer 8:
-
<html>
-
<head>
-
<body>
-
<div class="outer">
-
<p class="inner">
- Lyrics - Lorem ipsum dolar
-
-
-
Internet Explorer 9:
-
<html>
-
<head>
-
<body>
- Text - empty Node text
-
<div class="outer">
- Text - empty Node text
-
<p class="inner">
- Lyrics - Lorem ipsum dolar
- Text - empty Node text
- Text - empty Node text
-
Reading bonuses
source to share
There is a workaround that allows you to relate the font size ( em
or %
): add another class with a pseudo element font-size
, reduce the size.
I put together a script showing a workaround , but the basic code is below:
<p class="one">Test (1.25em = 20px)</p>
<p class="one two">Test (2em = 32px but 2.5em = 40px in IE)</p>
<p class="one one-ie two">Test (2em = 32px)</p>
Then the styles look like this:
body {
font-size: 16px;
}
.one::before {
content: "::before";
font-family: monospace;
font-size: 1.25em;
margin-right: 10px;
}
.one-ie::before {
font-size: 0.8em;
}
.two::before {
font-size: 2em;
}
Most browsers will override the selector .one-ie::before
with .two::before
, and the IE build will essentially negate the previous one font-size
. If IE fixes the bug and allows pseudo-element styles to be overridden rather than compiled, the hack becomes overridden like any other browser.
source to share