最好的答案是--取决于你最终使用的字体系列、字体大小和行高--它需要一些负边距（喘气）来得到 * 刚刚好 *。也就是说，我已经得到了看起来相当不错的东西：

http://jsfiddle.net/rafegoldberg/zohs9tna/5/

诀窍是重新设置行高，使其与首字下沉字体的大小相匹配，而不是继承其所在段落的行高。因此，这样做可以实现一致的顶部对齐：

p:first-letter {
    font-size: 230%;
    float: left;
    line-height: 1;
    display: inline-block;
}

This will result in something like this.（抱歉链接到图像;我没有足够的代表来发布图片！）但是它仍然是不完美的，因为它被对齐到第一行的延长线而不是文本顶部。要解决这个问题，你需要调整首字下沉的顶部边距;反复使用它，直到您将首字下沉轻推到文本顶部对齐，而不是扩展器。您可以使用outline和outine-offset使其达到像素完美！
这可能会导致下一行文本向下移动。如果发生这种情况，请尝试在首字下沉中添加一个轻微的负下边距。这样应该会将该行向上拉，这样就可以开始了！您的CSS看起来与上面的完全一样，但多了一行：

p:first-letter {
    /* ... */
    margin: .1em .25em -.5em;
}

With that addition things should now look like this.（PS：我在首字放大的左右两边添加了一些边距，因为我认为这样会得到更好看的效果！）
再次强调，这只是一些需要不断改进才能达到完美的东西。但是一旦你让它与你的特定字体属性（家族、大小、行高等）一起工作，它应该能始终如一地工作。希望这对你有所帮助;干杯！🍻

我在Windows 7上的Chrome、IE10和Firefox中测试了以下代码：

p.cap {
    line-height: 1.4em;
}

p.cap:first-letter {
    font-size: 2.8em;
    float: left;
    margin-top: 0.25em;
}

(Note我在这里使用的是 em 而不是percent，而且首字下沉的大小是段落行高的两倍。）
在Firefox中，似乎是float造成的。它在Chrome和InternetExplorer中显示得很好，但在Firefox中，在第一个字符上使用float似乎会使它与行的其余部分的基线断开。我可以删除float: left;并添加vertical-align: -100%;，以使基线在所有浏览器中都匹配。但是行高会变得混乱，首字下沉不能浮动，所以这不是一个解决方案。
唯一的解决办法似乎是在第一个字母周围加一个空格，然后用它来代替。比如：

<p class="cap"><span class="dropcap">Ž</span>ed Fhi GaFshF s in GfsF Fhl kfhlkshG glkHjha slkgh ka KFhl skh glkSdsfg d HH Gkhaskg hsHöAKH Hköah skhHaSÖK G hih h G h IGU</p>
<p class="cap"><span class="dropcap">Z</span>as Fhi GaFshF s in GfsF Fhl kfhlkshG glkHjha   slkgh ka KFhl sh glkSdsfg d HH Gkhaskg hsHöAKH Hköah skhHaSÖK G hih h G h IGU</p>

以及：

p.cap .dropcap {
    float: left;
    font-size: 2.8em;
    margin-top: 0.25em;
}

这看起来保持了基准，在Firefox中也显示得很好，但是动态地编写这些标签自然需要PHP或JavaScript或类似的东西。如果这不是一个选项，你可能无法在Firefox中获得好的结果。不幸的是。

在所有浏览器中保持一致的首字下沉，并在iOS上进行了测试。Firefox中的首字下沉***：first-letter as float left * 将丢失行高 * 并使字母变为sup样式。您可以通过以下方法避免此问题：
1.用相等的固定值添加上填充和下填充。
1.设置字体大小
1.将行高设置为fontsize值减去padding-top和padding-bottom值

1. Opt使用负值（或正值）调整上边距
2. Opt使用负下边距值调整文本底部绕排。
   这个例子是一个完美的“Typographic dropcap“1，字体为Arial，段落为12 px，行高为16 px。在我的测试中，整个文本块的顶部边距为10 px。
   1使用字符“V”作为首字下沉，后跟一个“i”字符。“i点”应与正确的印刷顶部对齐方式相匹配。（当然，并非所有设备/字体系列都一致，但这是一个很好的参考点）。

/* Dropcap */

 p.dropcap:first-letter {
 padding-top: 5px; 
 padding-bottom: 5px; 
 margin-top: -1px; 
 margin-right: 7px; 
 margin-bottom: -3px; 
 line-height: 24px; 
 float: left; 
 color: #777667; 
 font-family: Arial, Georgia, open sans; 
 font-size: 34px; 
 font-weight: 600; 
 text-transform: uppercase; 
}

希望这对您的样式表上下文有所帮助。

查看更新的小提琴：
jsFiddle

试试这个：

p.cap {
     text-indent:0; font-size:125%; line-height:125%;
     text-align:justify;
 }

p.cap:first-letter {
     display:inline-block; float:left; font-size:280%;margin-top:15px
}

p.cap_push_it_down:first-letter {
    display:inline-block; 
    float:left; font-size:230%;
    padding-top:14px; //note this

}
我认为你应该给予一些不同的类名称，以字母开头的段落，如，并指定他们的风格一样，在上面显示的代码...
另外，你能不能再详细说明一下那些“错误的解决方案”？

试试这个-定义一个字体开关适合你的要求...

body 
{font-family: "times"};
p.cap {
    text-indent:0; font-size:125%; line-height:125%;
    text-align:justify;
}

p.cap:first-letter {
    display:inline-block; float:left; font-size:280%;margin-top:-6px

在jquery的一点点帮助下（感谢foxybagga），我不知何故做到了这一点。
这是

$("#container p").each(function () {
    var text = $(this).html();
    var first = $('<span>' + text.charAt(0) + '</span>').addClass('caps');
    $(this).html(text.substring(1)).prepend(first);
});

这个类只比你的p.cap：first-letter class多了几行代码，但是它完成了这个任务。

.caps {
    display:inline-block;
    float:left;
    font-size:230%;
    line-height:100%;
    margin-top:-2px;
    padding-right:2px;
}

请注意：将这些css规则与您的p.cap：first-letter class一起使用不会给予相同的结果。
jsfiddle

下面是一种方法的结果：http://jsfiddle.net/picbig/s856R/38/

p.cap {
    text-indent:0; font-size:125%; line-height:125%;
    text-align:justify;
}

p.cap:first-letter {
    float: left; font-size:230%;

}

p.cap:first-child:first-letter{
    margin-top: -5px;
}
p.cap:last-child:first-letter{
    margin-top: 2px;
}

A：使用双pseudo：first-child：first-letter{}分别定位每个p：first-letter，并在它们上设置边距
B：无需显示：p.cap上的内联块：首字母

无论普通文本或首字下沉的字体大小如何，都可以将第一个字母的行高设置为100%：

p.cap {
    text-indent:0; font-size:125%; line-height:125%;
    text-align:justify;
}

p.cap:first-letter {
    position: relative; float:left; font-size:200%; line-height: 100%;
}

更新的小提琴：http://jsfiddle.net/g11v61sc/