2

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

我有几个使用 CSS3 伪选择器在第一个字母上使用首字母下沉的段落。这在 FF、Opera 和 Safari 中显示良好，但在 IE9 中显示不佳。问题是我使用 em 单位作为填充来定位字母。如果我将这些更改为 px，则该字母在所有浏览器中都可以正常显示；但我不乐意在我的文本中混合 px 和 em。我认为这与 IE9 如何呈现 em 单位有关。

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

HTML：

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

CSS：

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

感谢您的任何见解！:)

BRgds

4

1 回答 1

2

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

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

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

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

看看新的小提琴

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

各种浏览器中的首字母

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

这种“怜悯”也有一些有趣的特点：

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

来自 w3.org 的信息

在 CSS3-linebox 模块中有一些与这些问题相关的基线对齐信息。可能需要阅读一下以查看其状态（或者也许这里有人可以添加它？）。

于 2012-02-13T22:22:19.933 回答