CSS :first-letter gets cut off at the border of the paragraph

Question

我的首字下沉有问题。请看本页http://www.madebypaz.com/portfolio/interaction/user-centred-design

:first-letter 在 webkit 的顶部被截断，Firefox 将它向下推到一行。您能否就如何解决此问题提出一些建议，使其只跨越两条线并且不会在顶部被截断？

非常感谢任何指点。

Answer 1

问题出在这条规则上:

.single-item .post-body p + p + p::first-letter,
article.blog .single-item.text p + p::first-letter { ... }

有问题的属性是行高和高度。我发现这些值有效:

line-height: 1em;
height: 0.7em;

但是，这会导致它跨越 3 行...