正如标题所暗示的那样，当我使用p:first-letter选择器时，它在Chrome中工作正常，但不适用于Firefox中的某些段落。
这是我用来应用样式的代码（使用 SASS）：
p:first-letter
font-family: 'Medici Text', serif
float: left
font-size: 5em
line-height: 60px
padding: 4px 8px 0 3px
.of-gods
&:before
content: ""
width: 400px
height: 400px
@include absolute-center
background: url("../../images/vectors/RopeBorder.svg") no-repeat center center
background-size: contain
animation: rotate-cw 20s linear infinite
&:after
content: ""
width: 150px
height: 250px
@include absolute-center
background: url("../../images/vectors/fist.svg") no-repeat center center
background-size: contain
这是它在Chrome中的外观图片：铬中的首字下沉
这是它在Firefox中的样子：火狐中缺少掉落帽
对于它的价值，有问题的段落使用了:before和:after元素。当我研究这个问题时，我看到了一些关于这些问题的东西，但我唯一看到的是一份日期为 2003 年的错误报告，据称该错误报告已修复，关于:first-letter在设置:before或:after伪元素样式时不起作用。
编辑：为忘记包含在线示例而道歉。这是我目前正在处理的内容。HTML是从Jade编译而来的。
编辑#2：添加了更多SASS代码来说明伪元素::before和::after伪元素的外观。
我看到 2 3 个选择
1：将before/after伪类移动到父类，choices
.choices:before {
content: "";
width: 400px;
height: 400px;
/*@include absolute-center;*/
background: url("../../images/vectors/RopeBorder.svg") no-repeat center center;
background-size: contain;
animation: rotate-cw 20s linear infinite;
}
.choices:after {
content: "";
width: 150px;
height: 250px;
/*@include absolute-center*/
background: url("../../images/vectors/fist.svg") no-repeat center center;
background-size: contain;
}
样本
p:first-letter {
font-family: 'Times New Roman', serif;
float: left;
font-size: 5em;
line-height: 60px;
padding: 4px 8px 0 3px;
}
.choices:before {
content: "";
width: 400px;
height: 400px;
/*@include absolute-center;*/
background: url("../../images/vectors/RopeBorder.svg") no-repeat center center;
background-size: contain;
animation: rotate-cw 20s linear infinite;
}
.choices:after {
content: "";
width: 150px;
height: 250px;
/*@include absolute-center*/
background: url("../../images/vectors/fist.svg") no-repeat center center;
background-size: contain;
}<div class="choices">
<p class="of-gods">
The land yearns for salvation. Wars, pestilence. Famine, death. As far as the eye can see, suffering and sorrow rule with an iron grasp. We were warned. Yet we would not listen. In our hubris, the prophetic words of the blind brothers fell on our deaf
ears. We must seek salvation. The four Gods will guide us. Since time immemorial, before the four races strode across these lands, they have kept vigil eternal and unyielding. In them we shall find solace. In them there is peace.
</p>
</div>2：添加一个额外的包装器，并在其上设置before/after伪类（根据注释添加此版本）
.choices div:before {
content: "";
width: 400px;
height: 400px;
/*@include absolute-center;*/
background: url("../../images/vectors/RopeBorder.svg") no-repeat center center;
background-size: contain;
animation: rotate-cw 20s linear infinite;
}
.choices div:after {
content: "";
width: 150px;
height: 250px;
/*@include absolute-center*/
background: url("../../images/vectors/fist.svg") no-repeat center center;
background-size: contain;
}
样本
p:first-letter {
font-family: 'Times New Roman', serif;
float: left;
font-size: 5em;
line-height: 60px;
padding: 4px 8px 0 3px;
}
.choices div:before {
content: "";
width: 400px;
height: 400px;
/*@include absolute-center;*/
background: url("../../images/vectors/RopeBorder.svg") no-repeat center center;
background-size: contain;
animation: rotate-cw 20s linear infinite;
}
.choices div:after {
content: "";
width: 150px;
height: 250px;
/*@include absolute-center*/
background: url("../../images/vectors/fist.svg") no-repeat center center;
background-size: contain;
}<div class="choices">
<div><p class="of-gods">
The land yearns for salvation. Wars, pestilence. Famine, death. As far as the eye can see, suffering and sorrow rule with an iron grasp. We were warned. Yet we would not listen. In our hubris, the prophetic words of the blind brothers fell on our deaf
ears. We must seek salvation. The four Gods will guide us. Since time immemorial, before the four races strode across these lands, they have kept vigil eternal and unyielding. In them we shall find solace. In them there is peace.
</p></div>
</div>3：将第一个字母T移动到伪类before
.of-gods:before {
content: "T";
width: 400px;
height: 400px;
/*@include absolute-center;*/
background: url("../../images/vectors/RopeBorder.svg") no-repeat center center;
background-size: contain;
animation: rotate-cw 20s linear infinite;
}
样本
p:first-letter {
font-family: 'Times New Roman', serif;
float: left;
font-size: 5em;
line-height: 60px;
padding: 4px 8px 0 3px;
}
.of-gods:before {
content: "T";
width: 400px;
height: 400px;
/*@include absolute-center;*/
background: url("../../images/vectors/RopeBorder.svg") no-repeat center center;
background-size: contain;
animation: rotate-cw 20s linear infinite;
}
.of-gods:after {
content: "";
width: 150px;
height: 250px;
/*@include absolute-center*/
background: url("../../images/vectors/fist.svg") no-repeat center center;
background-size: contain;
}<div class="choices">
<p class="of-gods">
he land yearns for salvation. Wars, pestilence. Famine, death. As far as the eye can see, suffering and sorrow rule with an iron grasp. We were warned. Yet we would not listen. In our hubris, the prophetic words of the blind brothers fell on our deaf
ears. We must seek salvation. The four Gods will guide us. Since time immemorial, before the four races strode across these lands, they have kept vigil eternal and unyielding. In them we shall find solace. In them there is peace.
</p>
</div>