CSS 首字下沉在 IE9 中使用 em 填充错误定位

Question

这是一个比其他任何问题都更有趣的问题，因为我已经设法解决了它，但并不是一个我觉得完全令人满意的解决方案。我宁愿知道问题发生的原因，以便更好地理解它。

我有几个段落的第一个字母是首字母大写，使用 CSS3 伪选择器。这在 FF、Opera 和 Safari 中显示良好，但在 IE9 中则不然。问题是我使用 em 单位作为填充来定位字母。如果我将它们更改为 px，则该字母在所有浏览器中都可以正常显示；但我不高兴在我的文本上混合 px 和 em 。我认为这与 IE9 渲染 em 单位的方式有关。

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>

我在这里做了一个 JSFiddle： http://jsfiddle.net/C5zsv/

Answer 1

是的，这个问题对我来说就像一个美妙的黑匣子谜题，所以我试图收集一些证据来支持任何答案。事实证明，各种浏览器对 em 和 :first-letter 的组合的呈现方式截然不同。

首先，这是我用来测试这个的代码（问题小提琴的一个分支）：

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

和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;
}

查看 the new fiddle

在各种浏览器中如何呈现：

基本上这个问题的答案（或者至少是底线，没有双关语）似乎是：混合em和first- letter 让您的网站受浏览器和字体系列的支配。孩子们，他们是不仁慈的。

这种“怜悯”还有一些有趣的功能：

• Chrome (125px) 和 IE (134px) 保持第一个字母的一致高度，但 FF 决定给 Ñ 一些额外的高度。
• FF 几乎总是将字母保留在实际的框中（Y 的左上角部分除外，但所有 3 个浏览器都这样做）。
• Chrome 和 IE 都允许 Ñ 和小写 g 超出框外。
• 三个浏览器中没有一个第二行文本的底部与第一个字母的实际底部部分对齐。
• 将内边距设置为 px 确实可以改善 IE 中大写 Y 的情况，但是对我来说，这在 FF 和 Chrome 中一直把事情搞砸。
• 正如预期的那样，当您更改字体系列时，结果会有很大差异。
• 最后但并非最不重要的一点是：这只是第一个字母的行为不一致。在这三个浏览器中，三个常规文本行非常相似（甚至可能相同？）。

来自 w3.org 的信息

在 CSS3-linebox 模块中，有一些关于 基线对齐< /a> 这似乎与这些问题相关。可能需要阅读一下才能了解其状态（或者也许这里有人可以添加它？）。