正如标题所暗示的那样，当我使用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中的图片： Drop caps in Chrome
这就是Firefox中的样子： Lack of drops caps in Firefox
对于它的价值，相关段落使用:before和:after元素。当我研究这个问题时，我已经看到了一些与此相关的内容，但我唯一看到的是2003年的错误报告，该报告应该已修复，当:first-letter或{:before时:after无法正常工作{1}}伪元素的样式。
编辑：对于忘记包含在线示例而道歉。 Here's what I'm working with currently. HTML是从Jade编译的。
编辑＃2 ：添加了更多SASS代码，以说明::before和::after伪元素的外观。
答案 0 :(得分：0)
我看到 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>