Transform scale on :first-letter in Firefox and IE

问题

I am making drop-caps for the first letter of a paragraph using transform: scale on the pseudo element :first-letter. It works great in Chrome but not in Firefox, although transform: scale and :first-letter both work in Firefox for themselves.

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);
}

Here is a jsfiddle

回答1:

Apparently, attempting to transform the :first-line and :first-letter pseudo-elements was crashing Firefox, so it was disabled. That was a long time ago, however; it may be worth revisiting in a new bug report.

There does not appear to be a pure CSS workaround, but you might be able to get away with using JavaScript to transplant the first letter into a child element and transforming that child element, instead of using :first-letter:

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

Updated fiddle

来源：https://stackoverflow.com/questions/24435595/transform-scale-on-first-letter-in-firefox-and-ie