css - 首字母 - CSS：两行的首字母

Question

我正在尝试在 < p > 元素中创建大的首字母，这些首字母应该从第二行开始并覆盖两行，但在 Firefox 中，第一个字母的位置不符合我的预期（在其他任何地方都可以使用，即使在 IE 中，也只有 FF 会出现问题...... )

http://jsfiddle.net/6SfHG/1/

任何想法如何使它在同一水平上开始？

Answer 1

这对我有用，虽然它不是很优雅：

:first-letter因此，要使用垂直对齐的伪元素获得跨浏览器首字下沉效果，您需要应用float: left，然后找到字体大写高度的高度，将 line-height 减小到该值，调整 margin-top 使其在 Firefox 中正确对齐在 Opera 或 WebKit 浏览器中，然后对仅 IE 样式表使用条件注释删除 margin-top 并更改 line-height 以正确垂直对齐类型。

p::first-letter {
  float: left;
  font-family: Georgia, serif;
  font-size: 75px;
  line-height: 60px;
  padding: 3px;
}

http://nickcowie.com/2009/drop-caps-first-letter-and-firefox/