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

Question

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

图片显示了错误:

这个bug 在2007年填写了bugzilla.

当你添加::first-letter伪元素时,会出现错误display: inline-block,然后更改font-size它first-letter.

第一个字后面的字母越多:添加更多的额外空格(或减去 - 如果字体大小小于块的空格).

添加float: left到first-letter反转错误:使用更大的字体大小inline-block缩小宽度.

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

Answer 1

我发现在整个页面(或任何有问题的块)上触发重排可以解决问题,所以我找到了一种方法,可以通过一次性CSS动画在每个这样的块上触发它:http:// jsfiddle.净/木津/ btdVd/23 /

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

• 它只适用于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的值足够 - 即每一个字符的四分之一会将每个字符的宽度减少一半,这就是我们想要的,因为第一个字母是font-size:2em,所以它是两倍大.

但是,计算并不是那么干净,因为字符串中的第一个和最后一个字符只会在每一个上重叠,并且因为第一个字母确实想要是双倍宽度,即使剩下的人物没有.

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

-0.225的值似乎是我能够得到的最接近它的所有示例,但在实践中,您需要调整它以适合您的网站.

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

[编辑]

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

这真的是明显的答案,当然会解决问题(并且也意味着你的风格第一个字母在旧浏览器中工作),但从语义角度来看它并不理想,更重要的是实际上并没有回答问题,这就是为什么我没有在原来的答案中提供它作为解决方案的原因.

我一直试图找到替代工作的bug,但选项是有限的,我尝试的没有给出与我最初的建议一样好的结果.

我尝试了制作:first-letter隐形的黑客,然后使用:before显示大的主要大写字母.但是,这对我不起作用.我没有徘徊太长时间,所以你可以让它工作,但它有一个问题,你必须在你的CSS中定义前导字母,这是不理想的.

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

最后,原始letter-spacing解决方案仍然是我发现真正解决bug的唯一方法.