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/
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>Ñ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:
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?).