htmlcssinternet-explorer-9marginfont-size

CSS drop caps wrongly positioned in IE9 with em padding


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/


Solution

  • 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:

    First-letter 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:

    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?).