如何正确对齐htmlcss中的drop cap？

概述那么我有以下问题：我需要一个动态的解决方案(不知道文本,生成的字体大小等)以错误的方式正确地对齐一个下拉盖.正确地意思是：下降盖的帽高度线应与段落的帽高度线相同. 例如：ZŽẐ应该与他们的上横杆对齐.当我看到这个问题的一些(错误的)解决方案(他们对齐整体高度,因此看起来可怕的口音,电泳等),我没有看到任何正确的解决方案. 有人知道吗 PS：它可以工作,如果我找到一些方法来一致地将dropcap的基 那么我有以下问题：我需要一个动态的解决方案(不知道文本,生成的字体大小等)以错误的方式正确地对齐一个下拉盖.正确地意思是：下降盖的帽高度线应与段落的帽高度线相同.

例如：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%;}

http://jsfiddle.net/s856R/

解决方法 我在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 ><span >Ž</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 ><span >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中获得好的结果.不幸.

总结

以上是内存溢出为你收集整理的如何正确对齐html / css中的drop cap？全部内容，希望文章能够帮你解决如何正确对齐html / css中的drop cap？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。