css首字下沉

您不会没有注意到我们在新博客设计中使用的首字母缩略词效果，以及大多数浏览器显示的第一行大写字母（除了Safari，我将在稍后说明的原因）。

有很多hacky方法可以实现这种效果，但是最干净，最可维护的方法是纯CSS ，它使用:first-letter和:first-line伪类。

这种方法意味着不需要额外的标记，没有图像，也不需要了解内容-无论首字母和第一行是什么，它们都会生效。

这是实现它的CSS ：

#post-content > p:first-child:first-line,
#post-content > .ad:first-child + p:first-line
{text-transform:uppercase;position:relative;font-size:0.95em;letter-spacing:1px;
}#post-content > p:first-child:first-letter,
#post-content > .ad:first-child + p:first-letter
{letter-spacing:0;text-transform:uppercase;color:#628fbe;font-family:times,serif;font-size:3.5em;float:left;margin:0.13em 0.2em 0 0;line-height:0.7;
}

您会注意到，如何在内容区域内的第一段中使用两种不同的选择器来尝试应用效果。 它需要足够灵活，以允许在紧接该段落之前标记为<div class="ad">的广告的存在或缺失。 因此，理想情况下，我将使用:first-of-type ，它在其父上下文中选择指定类型的第一个元素：

#post-content > p:first-of-type:first-line
{
}#post-content > p:first-of-type:first-letter
{
}

但这还没有得到广泛支持。 我们使用的选择器意味着我们将获得对IE8的支持，否则我们将不会提供支持。

不幸的是，对于第一线的大写，我们没有获得对Safari的支持。 这并不是因为选择器的原因-它支持此处显示的所有示例，并且确实在这些规则中应用了其他属性-只是没有应用text-transform 。 我在许多不同的情况下都注意到了这一点，其中Safari出于没有显而易见的原因不应用转换。 我已经看到它无法应用于<input>元素（在该元素上它对应于相应的<button> ，并且在这里我们看到它无法应用于段落的第一行，即使将其应用于整个段落也可以！ 去搞清楚。

对于首字下沉本身，您可以看到它非常容易实现。 该规则中值得注意的是，将页margin-top和line-height结合起来使字母定位。 如果省略这两个属性，则会得到以下结果：

应用行高之前的首字下沉。

从左到右，您所看到的是Firefox，Opera和Safari。 实际上是Firefox渲染错误 ，而Opera和Safari却正确显示了Firefox – Firefox仍将父段落的行高应用于第一个字母，而忽略了其大得多的字体大小，而其他浏览器正确地应用了一行-与字母的字体大小相对应的高度。

因此，我们可以利用差异来平衡浏览器之间的结果-逐步减小行高，这与Firefox毫无区别，直到我们在Opera和Safari（和IE8 ）中得到相似的结果：

行高后的首字下沉被应用。

然后，这只是在垂直位置看起来正确之前添加页margin-top的情况。

这不是我第一次在Firefox中看到这种渲染行为。 而且，由于我们没有只能适用于Firefox的CSS hack，因此这种差异实际上是我们可以应用浏览器调整的唯一方法。 而且随着浏览器调整的进行，这完全是面向未来的-如果Firefox修复其实现并应用正确的行高，则它会像其他版本一样首先问世。

具有讽刺意味的是，当Firefox是唯一会出错的浏览器时，我们应该修复除Firefox外的所有浏览器！ 但这就是我们行业的运作方式-Firefox，就像您的小姐一样，“永远是对的”。

缩图： Thoth

翻译自: https://www.sitepoint.com/a-simple-css-drop-cap/

css首字下沉