CSS：第一个字母在段落的边界被截断

Question

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

：首字母在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行......