我遇到了以下问题：我需要一种动态解决方案（不知道文本、结果字体大小等），以正确地排列首字下沉。正确的意思是：首字下沉的大写字母高度线应该与段落的大写字母高度线相同。
例如：Z Ž Ẑ 应该都对齐到它们的上部水平线。虽然我见过一些（错误的）解决此问题的方法（它们对齐整体高度，因此在使用重音符号、分音符号等时看起来很糟糕），但我还没有见过任何正确的解决方案。
有人知道吗？
附注：如果我能找到一种方法来始终将首字下沉的基线与段落第二行的基线对齐，那么它可能有效，因为从那里可以通过字体大小的百分比修改器来完成。不幸的是，我也不知道如何实现这一点。
这里有一些可以玩的东西：
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: 230%;
}
最好的答案是，根据您使用的字体系列、字号和行高，它需要一些负边距的调整（哇），才能达到完美的效果。话虽如此，在这个示例中我已经让它看起来非常不错：
http://jsfiddle.net/rafegoldberg/zohs9tna/5/
p:first-letter {
font-size: 230%;
float: left;
line-height: 1;
display: inline-block;
}
这将导致类似于这样的结果。（抱歉，链接到图像；我没有足够的声望来发布图像！）但它仍然不完美，因为它被对齐到第一行的延伸符而不是文本顶部。要修复这个问题，您需要调整下沉字母的顶部边距；尝试调整它，直到您将其推向文本顶部而不是延伸符的对齐位置。您可以使用 outline 和 outline-offset 来使其像素完美！
这可能会导致下一行文本向下移动。如果发生这种情况，请尝试向下沉字母添加略微负的底部边距。这应该将该行拉回，并且您就可以开始了！您的 CSS 将与上面完全相同，但是还有以下附加行：
p:first-letter {
/* ... */
margin: .1em .25em -.5em;
}
加上这个后，现在应该看起来像这样。（附注：我在首字母大写字母的左右两侧添加了一些边距，因为我认为这样可以得到更好的效果！）
再次提醒，这需要一些调整才能完美地实现。但是一旦您使用特定的字体属性（族、大小、行高等）使其正常工作，它应该始终如一。希望这有所帮助；干杯！
p.cap {
line-height: 1.4em;
}
p.cap:first-letter {
font-size: 2.8em;
float: left;
margin-top: 0.25em;
}
float。它在Chrome和Internet Explorer中显示得很好，但在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中获得良好的结果。不幸的是。
/* 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;
}
给首字母设置行高为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%;
}
更新的 jsfiddle：http://jsfiddle.net/g11v61sc/
查看您更新后的代码片段：
试一下这个：
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 {
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: 使用双重伪类:first-child:first-letter{}针对每个p:first-letter进行定位，并设置其边距。
B: p.cap:first-letter无需使用display: inline-block。
在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);
});
使用 <span class="caps"> 标签包裹首字母。 这个类比你的 p.cap:first-letter 类多了几行代码，但是可以完成任务。
.caps {
display:inline-block;
float:left;
font-size:230%;
line-height:100%;
margin-top:-2px;
padding-right:2px;
}
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