那么我有以下问题：我需要一个动态的解决方案(不知道文本,生成的字体大小等)以错误的方式正确地对齐一个下拉盖.正确地意思是：下降盖的帽高度线应与段落的帽高度线相同.
例如：ZŽẐ应该与他们的上横杆对齐.当我看到这个问题的一些(错误的)解决方案(他们对齐整体高度,因此看起来可怕的口音,电泳等),我没有看到任何正确的解决方案.
有人知道吗
PS：它可以工作,如果我找到一些方法来一致地将dropcap的基线与段落的第二行的基线对齐,因为从那里可以使用font-size的％-modifier来完成.不幸的是,我也不知道如何归档这个.
这里有一些东西要玩：
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%;
}
解决方法
我在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;
}
(请注意,我使用em而不是这里的百分比,并且drop cap的大小是段落line-height的两倍).
似乎这个罪魁祸首是在Firefox中浮动的.它在Chrome和Internet Explorer中显示不错,但在使用float的Firefox中,第一个字符似乎将其与其余行的基线断开连接.我可以删除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中获得好的结果.不幸.
