css - 是否有针对 Firefox 错误 : inline-block + first-letter with changed size 的 CSS 解决方法

Question

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

显示错误的图片:

还有错误 filled in 2007 on bugzilla .

当您使用 display: inline-block 添加 ::first-letter 伪元素，然后更改 font-size 时，会出现此错误 这个第一个字母。

第一个单词后的更多字母:添加(或减去)更多的额外空间——如果字体大小小于 block 的大小。

将 float: left 添加到 first-letter 会反转错误:随着字体大小的增加，inline-block 的宽度会缩小。

那么，问题是:是否有任何针对此错误的纯 CSS 解决方法？这有点让我难受。

Answer 1

我发现在整个页面(或任何有问题的 block )上触发重排可以解决这个问题，所以我找到了一种方法来在每个这样的 block 上使用一次性 CSS 动画触发它:http://jsfiddle.net/kizu/btdVd/23/

不过，虽然此修复程序在渲染方面没有缺点，但它还有一些其他缺点:

• 它仅适用于 Fx5+(支持动画)；
• 它仍然会闪烁原始错误几毫秒，所以它可能有点闪烁。

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