在 Firefox 和 IE 中转换比例：first-letter

Posted 2023-03-06

【中文标题】在 Firefox 和 IE 中转换比例：first-letter

【英文标题】：Transform scale on :first-letter in Firefox and IE

【发布时间】：2014-08-17 14:32:22

【问题描述】：

我在伪元素: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

【问题讨论】：

developer.mozilla.org/de/docs/Web/CSS/::first-letter 说，“只有一小部分 CSS 属性可以在包含使用 ::first-letter 伪元素的选择器的 CSS 规则集的声明块内使用” ，而transform 不在下面的列表中。这符合dev.w3.org/csswg/selectors3/#application-in-css AFAICS。

【参考方案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

【讨论】：

有了 JavaScript，我几乎可以做任何事情。我正在寻找没有 JavaScript 或更改标记的纯 CSS，但感谢您的努力。

@Esser：没有，太糟糕了。