Question

我尝试使用:first-letter伪选择器设置一个下限，但Firefox忽略了line-height：

＆＃13;

p {
  font-family: sans-serif;
  line-height: 3rem;
  font-size: 2.4rem;
}

p:first-letter {
  float: left;
  background-color: black;
  color: white;
  line-height: 6rem;
  font-size: 4.8rem;
  padding: 0 1rem;
  margin-right: 0.5rem;
}

＆＃13;

<p>Feugiat adipisci salutandi mei eu, eu vix purto vero oratio. Eam justo viris
iudicabit te, sea dico esse tritani ea. Sed ad epicurei splendide. Ut constituam
delicatissimi usu. Et pro quem ceteros, ad cum doming eripuit reformidans.
Suspendisse pulvinar congue elit, vitae tincidunt mauris tempus non. Morbi
mattis tellus orci, sit amet tincidunt nibh ullamcorper vitae. Phasellus
  suscipit augue nec diam elementum, at porta est egestas.</p>

＆＃13;

它似乎是一个古老的错误/功能。请参阅here。

有解决方法吗？

我根本无法修改标记，因此不要将第一个字母包装在另一个元素中以允许在没有first-letter的情况下定位它。

我无法使用垂直填充，因为Firefox折叠到与其他浏览器不同的line-height，即使在line-height为零，这意味着我必须使用不同的垂直填充值来定位FF 。

明确将display设置为block，inline-block或flex无效。

设置height或min-height无效。

我知道inital-letter，但支持还有很长的路要走。

Answer 1

我会调整第一个字母的margin-top，然后将渐变作为主要元素的背景来模拟第一个字母的背景：

＆＃13;

p {
  font-family: sans-serif;
  line-height: 3rem;
  font-size: 2.4rem;
  background:linear-gradient(#000,#000) 0 0/4.8rem 6rem no-repeat;
}

p:first-letter {
  float: left;
  color: white;
  font-size: 4.8rem;
  padding: 0 1rem;
  margin-right: 0.5rem;
  margin-top: 1.5rem; /*adjust this as you need*/
}

＆＃13;

<p>Feugiat adipisci salutandi mei eu, eu vix purto vero oratio. Eam justo viris
iudicabit te, sea dico esse tritani ea. Sed ad epicurei splendide. Ut constituam
delicatissimi usu. Et pro quem ceteros, ad cum doming eripuit reformidans.
Suspendisse pulvinar congue elit, vitae tincidunt mauris tempus non. Morbi
mattis tellus orci, sit amet tincidunt nibh ullamcorper vitae. Phasellus
  suscipit augue nec diam elementum, at porta est egestas.</p>

＆＃13;

Firefox的解决方法忽略浮动伪元素中的行高

1 个答案: