Firefox中的css首字母故障

Firefox中的css首字母故障,css,firefox,pseudo-element,Css,Firefox,Pseudo Element,我在Firefox中遇到了一个CSS问题,它在IE和Chrome中运行良好。 以下示例显示了多个a标记,这些标记的大小应尽可能小,而a标记的大小应尽可能小。首字母大写的标记的首字母应大写。但是使用伪选择器::第一个字母进行更改会破坏这种行为。是否存在css黑客行为,使其行为与Chrome和IE中的行为相同 (如果您停用并响应选择器集中的字体大小规则,您可以在Firefox中显示正确的表示形式 a{ 字号:14pt; 显示:内联块; } .首次资本化{ 字号:9pt; } .首字母大写::首字母

我在Firefox中遇到了一个CSS问题,它在IE和Chrome中运行良好。 以下示例显示了多个
a
标记,这些标记的大小应尽可能小,而
a
标记的大小应尽可能小。首字母大写的
标记的首字母应大写。但是使用伪选择器
::第一个字母
进行更改会破坏这种行为。是否存在css黑客行为,使其行为与Chrome和IE中的行为相同

(如果您停用并响应
选择器集中的
字体大小
规则,您可以在Firefox中显示正确的表示形式

a{
字号:14pt;
显示:内联块;
}
.首次资本化{
字号:9pt;
}
.首字母大写::首字母{
字号:14pt;
}

所以我找到了一个解决您问题的小方法。 由于该问题在页面重新绘制时得到修复,您只需添加一个小的关键帧即可强制重新绘制

它真的很粗糙,但它很有效。直到Firefox解决这个问题。 您还可以决定不使用
::first letter
伪元素,而使用更“硬编码”的元素,比如用
包装标记的第一个字母

话虽如此,我已经为你的问题寻找了一段时间的解决方案,一篇类似的StackOverflow帖子帮助我找到了这个解决方案(这个)

a{
字号:14pt;
显示:内联块;
动画:固定0.00000001秒;
}
.首次资本化{
字号:9pt;
-moz填充结束:0;
字体拉伸:压缩;
}
.首字母大写::首字母{
字号:14pt;
颜色:红色
}
@-moz关键帧修复{
从{padding right:1px;}
到{右填充:0;}
}


似乎第一个字母伪元素的元素占用的空间与整个单词的字体大小一样大。然后,当在开发者工具中切换时,firefox修复了这个问题(正如OP所提到的),看起来就像是firefox的bugme@Danield确切地说,我是这么想的:(你对如何解决这个问题有什么想法吗?:D太好了,我有一个类似的想法,正在用js构建一个解决方案。但是你的想法好多了!非常感谢你的努力。如果这有帮助的话,我很高兴:)但是所有的功劳都归Btw了。我刚刚添加了一个与你(或kizus)非常相似的js解决方案4年后,这仍然是一个问题。