Firefox的bug是否有CSS解决方法：内联块+带有更改大小的第一个字母

Question

最好在Firefox中看到自己的错误：http://jsfiddle.net/kizu/btdVd/

图片显示了错误：

错误filled in 2007 on bugzilla。

当您使用::first-letter添加display: inline-block伪元素时会出现错误，然后更改此font-size的{​​{1}}。

第一个字后面的字母越多：添加更多的额外空格（或减去 - 如果字体大小小于块的话）。

将first-letter添加到float: left会导致错误：使用更大的字体大小，first-letter的宽度会缩小。

所以，问题是：这个bug是否有任何仅限CSS的解决方法？这有点让我伤心。

Answer 1

我发现在整个页面（或任何有问题的块）上触发重排可以解决这个问题，所以我找到了一种方法，可以通过一次性CSS动画在每个这样的块上触发它：{{3 }}

尽管如此，虽然此修复在渲染方面没有任何缺点，但它还有其他一些：

• 它只适用于Fx5 +（支持动画）;
• 它仍然闪烁原始的bug几毫秒，所以它可能有点眨眼。

因此，它不是一个理想的解决方案，但在Fx4-过时时会有所帮助。当然，你可以用JS触发这样的修复onload，但它并不是那么好。

Answer 2

我认为没有一个好的解决方案。

我为你提出了一个片状的解决方案：

.test:first-letter {
    font-size: 2em;
    letter-spacing: -0.225em;
}

将letter-spacing样式添加到您的小提琴中的:first-letter选择器，您会发现这些块会回到大致正确的大小。

<强>解释

基本上，错误是由整个块从first-letter中指定的字体中获取其大小引起的。

我在这里使用letter-spacing正在尝试调整此字体的大小，而不会影响它的外观。在正常文本中以这种方式调整字母间距将导致字母彼此重叠.225两边的字符宽度。

我最初希望-0.25的值足够 - 即每一个字符的四分之一会将每个字符的宽度减少一半，这就是我们想要的，因为第一个字母是{{ 1}}，所以它的两倍大。

然而，计算并不是那么干净，因为字符串中的第一个和最后一个字符只会在每一个上重叠，并且因为第一个字母确实想要是双倍宽度，即使其余的角色没有。

所有这些意味着反对行为所需的确切font-size:2em值将根据文本的长度以及原始文本和第一个字母的字体大小而有所不同。这就是为什么我必须尝试使用​​字母间距的值来使它工作，并解释为什么我不能完全适合你的小提琴中的所有文本行。我需要为每个块稍微不同的值。

-0.225的值似乎与我所能得到的最接近的所有示例相符，但在实践中，您需要调整它以适合您的网站。

不要忘记这是一个Firefox错误，因此您需要将其编写为某种特定于浏览器的黑客。并且要小心注意您链接的Firefox错误报告;当它确实得到修复时，您需要找到一种方法来为旧版本的用户保留您的黑客，但是为具有此修复程序的用户删除它。

[编辑]

我提出的唯一其他工作解决方案就是不使用触发错误的功能。即删除letter-spacing选择器，如果要以不同的方式设置样式，请使用单独的:first-letter作为文本的第一个字母。

这确实是一个明显的答案，当然可以解决问题（并且也意味着你的风格第一个字母可以在旧浏览器中运行），但从语义角度来看它并不理想，更重要的是不是实际上回答了这个问题，这就是为什么我没有在原来的答案中提供它作为解决方案。

我一直在尝试寻找替代方案来解决这个问题，但选项有限，而且我所尝试的并没有给出与我最初的建议一样好的结果。

我试图让<span>看不见，并使用:first-letter来显示大的首要大写字母。但是，这对我不起作用。我没有徘徊太长时间，所以你可以让它工作，但它有一个问题，你必须在你的CSS中定义前导字母，这是不理想的。

另一种可能的解决方案是使用:before上的CSS font-stretch: condensed;属性。这会将第一个字母的宽度减少回:first-letter，从而解决文本其余部分的宽度问题。然而，这方面的缺点是首先它会使主要字母看起来被压扁，这可能不是你想要的，其次这种风格仅适用于支持1em属性的字体。事实证明，标准字体并不能很好地支持这一点，因此可能对你不起作用。

最后，原始的condensed解决方案仍然是我发现真正解决这个问题的唯一方法。

Answer 3

此错误仍然存​​在，但某些修复程序不再起作用。即使在触发带动画的回流之后，内联块也会为我返回相同的大小。我无法使用letter-spacing技巧，因为我已经在第一个字母上使用它，这就是导致问题的原因。我通过将此添加到受影响的选择器的CSS来解决问题：

-moz-padding-end: *number of pixels to compensate*;

目前，moz-padding-end似乎特定于Firefox，它可以在内联块的末尾添加或删除宽度。因为这是一个特定于Firefox的错误，所以这对我有用。

Answer 4

我知道这个帖子现在已经很老了，但显然这个bug还没有修复。

使用animation确实有效，但有一个明显的FOUT（Flash of Unstyled Text）。通过将first-letter包裹在span中，我能够解决问题。这确实适用于大小调整问题和FOUT，它确实为标记添加了额外的元素，因此如果这是最合适的，它取决于您的站点/应用程序的需求。

.test {
    background: rgba(0,0,0,0.15); /* For visualisation */
    display: inline-block;
}

.test:first-letter {
    font-size: 2em;
}

.test2:first-letter {
    float: left;
}
.test3:first-letter {
    font-size: .5em;
}

<h1>Inline-block with bigger first-letter</h1>

<span class="test">Broken</span>
<br><br>
<span class="test"><span>F</span>ixed</span>


<h1>+ floating to first-letter</h1>

<span class="test test2">Broken</span>
<br><br>
<span class="test test2"><span>F</span>ixed</span>
 

<h1>small size for first-letter</h1>

<span class="test test3">Broken</span>
<br><br>
<span class="test test3"><span>F</span>ixed</span>

<h1>small size, floating first-letter</h1>

<span class="test test2 test3">Broken</span>
<br><br>
<span class="test test2 test3"><span>F</span>ixed</span>