css - 在 :first-letter in Firefox and IE 上变换比例

Question

我正在使用伪元素 :first-letter 上的 transform: scale 为段落的第一个字母制作首字下沉。尽管 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 :

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

Updated fiddle