为什么在Firefox中此文本太宽？

Question

我有一个网站，该网站在文章开头使用CSS创建首字下沉。在大多数浏览器中，此功能都可以正常工作，但是Firefox（Linux和Android）无法正确显示它，但只能在某些情况下显示。

在大多数页面上，我得到了正确的输出，如下所示（侧面的蓝色虚线是容器的边缘，出于说明目的而显示）：

但是，对于少数页面，Firefox会这样渲染它： 请注意，首字下标的右边有一个很大的间隙，文本会以相应的数量溢出框。

以下是相关的SASS：

article .first-paragraph {
    text-indent: 0;

    &::first-letter {
        font-size: 300%;
        font-weight:normal;
        display: block;
        float: left;
        margin-right: 0.25em;
        padding: 0.5em 0.3em 0.3em 0.5em;
        background: $primary-color;
        color: $background-color;
        border-radius: 50em 5em 5em 5em;
        font-family: 'Fredericka the Great', $base-font-family;
    }
    &::first-line {
        font-variant: small-caps;
    }
}

我一直无法发现任何可以解释这种现象的差异。这些文章以Kramdown风格的Markdown编写，并由Jekyll处理。除了单词本身，这两篇文章在Markdown中是完全相同的。但是，该错误始终发生在同一页面上。我尝试将前几个字符设置为相同，但无济于事。我还使以前的内容遵循相同的结构，在结构上有所不同，但没有任何改变。

任何想法可能有什么问题，或者我可能忘记测试了什么？

编辑

我将有问题的CSS缩小为以下规则：

article .first-paragraph::first-letter {
  display: block;
  float: left;
  margin-right: 0.25em;
  padding: 0.5em 0.3em 0.3em 0.5em;
}

如果我将它们全部关闭，问题将消失。如果我打开其中的任何一个或组合使用，则问题又回来了，除了display: block本身不会导致任何问题。

如果您想对其进行进一步测试，请here's an example page with the bug（至少在我设法修复它之前。）

我考虑得越多，我认为受影响的页面上除了我在此处发布的内容之外，肯定还有其他内容，这导致Linux，Windows和Android上的Firefox出现问题。但是对于我的一生，我无法弄清还有什么。