css - CSS :first-letter 在段落的边界处被截断

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 行...