Question

我正在使用伪元素transform: scale上的:first-letter为段落的第一个字母制作首字母大写字母。虽然transform: scale和:first-letter可以在Firefox中使用，但它在Chrome中效果很好，但在Firefox中却不行。

HTML

<p>Lorem ipsum dolar sit amet</p>

CSS

p:first-letter {
float: left;
margin-left: -36px;
margin-top: 10px;
font-size: 53px;
transform: scale(1,2);
-ms-transform: scale(1,2);
-webkit-transform: scale(1,2);
-moz-transform: scale(1,2);
}

这是jsfiddle

Answer 1

显然，尝试转换:first-line和:first-letter伪元素是崩溃 Firefox，所以it was disabled。那是很久以前的事了;可能值得在新的错误报告中重新审视。

似乎没有纯粹的CSS解决方法，但您可以使用JavaScript将第一个字母移植到子元素并转换该子元素，而不是使用:first-letter：< / p>

var p = document.querySelector('p');
var text = p.innerHTML;
p.innerHTML = '<span>' + text.charAt(0) + '</span>' + text.substring(1);

Updated fiddle

转换比例：Firefox和IE中的第一个字母

1 个答案: