变换缩放：在Firefox和IE中的第一个字母 [英] Transform scale on :first-letter in Firefox and IE

问题描述

我使用伪元素上的 transform：scale 为段落的第一个字母制作drop-caps：：first-letter 。虽然 transform：scale 和：first-letter 在Firefox中都可以使用

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

CSS

  p：第一个字母{
 float：left; 
 margin-left：-36px; 
 margin-top：10px; 
 font-size：53px; 
 transformation：scale（1,2）; 
 -ms-transform：scale（1,2）; 
 -webkit-transform：scale（1,2）; 
 -moz-transform：scale（1,2）; 
} 
  

这里是 jsfiddle

解决方案

显然， $ c>：第一行和：第一个字母伪元素崩溃 Firefox，因此已停用。然而，这是很久以前;它可能值得重新审视一个新的错误报告。

似乎没有一个纯CSS的解决方法，但你可能能够放弃使用JavaScript移植将第一个字母转换为子元素并转换该子元素，而不是使用：first-letter ：

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

更新小提琴

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

解决方案

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

这篇关于变换缩放：在Firefox和IE中的第一个字母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！