Question

This is more of an intriguing problem than anything else since I have managed to solve it, but not with a solution that I find entirely satisfying. I’d rather know why the problem occurs to better understand it.

I have several paragraphs with drop-caps on the first letters using CSS3 pseudo-selectors. This displays fine in FF, Opera and Safari but not IE9. The problem is the em units I’m using as padding to position the letter. If I change these to px the letter displays fine in all browsers; BUT I’m not happy mixing px and em on my text. I assume this has something to do with how IE9 renders em units.

p {
    margin:0 0 1.5em 0;
    text-align:justify;
    font:1em/1.5 Georgia, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", serif;
}
.post-content p:first-child:first-letter {
    float:left;
    color:#444;
    font-size:3.3em;
    padding:0.1em 0.1em 0 0;
    line-height:0.7em;
    text-shadow:2px 2px 0 #dadada;
}

<section class="post-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet mi ut erat dapibus varius. Cras aliquet augue eget ipsum posuere a mattis quam gravida. Proin pretium rhoncus mi, nec dapibus odio iaculis id. Aenean mattis, nulla eu hendrerit fermentum, urna tellus tristique mauris, eu dignissim quam arcu ut nisi.</p>
</section>

I’ve made a JSFiddle here: http://jsfiddle.net/C5zsv/

Answer 1

Right, this question felt like a wonderful black box puzzle to me, so I tried to gather some evidence to support any answers. Turns out various browsers render the combination of em and :first-letter quite differently.

First up, here’s the code I used to test this (a fork of the question’s fiddle):

<p>Yyy is a<br />tall letter<br />indeed.</p>
<p>&Ntilde;ino has a<br />tall letter<br />as well.</p>
<p>ggg has a<br />big bottom<br />ahw yeah.</p>

And the CSS:

p {
    margin: 0 0 1.0em 0;
    font: 3em/1.5 Georgia;
    background-color: #CCE;
}
p:first-letter {
    float: left;
    font-size: 3.3em;
    padding: 0.1em 0.1em 0 0;
    line-height: 0.7em;
    background-color: #DFD;
}

Check out the new fiddle

How this renders in various browsers:

Basically the answer to this SO question (or at least bottom line, no pun intended) seems to be: mixing em and first-letter leaves your site at the mercy of the browser and the font-family. And boy, are the not merciful.

This “mercy” has a few interesting features as well:

• Chrome (125px) and IE (134px) keep a consistent height for the first-letter, but FF decides to give Ñ some extra height.
• FF almost always keeps the letter inside the actual box (with the exception of the top-left part of the Y, but all 3 browsers do this).
• Chrome and IE both allow the Ñ and lowercase g to go outside the box.
• Not one of the three browsers has the bottom of the second line of text aligned with the actual bottom part of the first-letter.
• Setting the padding in px does improve the capital Y situation in IE, however for me this kept screwing things up in FF and Chrome.
• As expected results vary wildly when you change the font-family.
• Last but not least: it’s just the first-letter that’s not behaving consistently. The three regular lines of text are quite similar (perhaps even identical?) in these three browsers.

Info from w3.org

In the CSS3-linebox module there is some info on baseline alignment that seems relevant to these issues. May have to read on a bit to see what the status is on that (or perhaps someone here can add it?).