CSS 首字下沉在 Firefox 和 Safari 中的显示方式不同。我该如何调整？

【问题标题】：CSS drop cap displays differently in Firefox and Safari. How do I adjust for this?CSS 首字下沉在 Firefox 和 Safari 中的显示方式不同。我该如何调整？
【发布时间】：2016-07-22 14:06:40
【问题描述】：

我正在努力寻找正确的 CSS 组合来帮助确保我的博客文章的首字下沉在所有浏览器中都显示相同。我主要使用 Safari 并在那里做我的设计工作。它在 Safari 中的呈现方式是我的偏好。

在 Firefox 中，首字下沉较低，文本不会环绕字母。我添加了一个负的底部边距，现在文本换行了。但它仍然挂得太低。我真的很想保持一致。

我能做些什么来解决这个问题？谢谢。

This is my website here.

【问题讨论】：

标签： firefox browser compatibility

【解决方案1】：

创建首字下沉：将 para 的第一个字符浮动到左侧。

.firstcharacter {
  float: left;
  color: #903;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
  font-family: Georgia;
}

<p>
  <span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices
  molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

【讨论】：