Обходной путь для Firefox Игнорирование высоты строки в плавающем псевдоэлементе - PullRequest
Новая
       20

Обходной путь для Firefox Игнорирование высоты строки в плавающем псевдоэлементе

0 голосов
/ 21 мая 2018

Я пытаюсь оформить буквицу, используя псевдо-селектор :first-letter, но Firefox игнорирует line-height: 

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;
}
<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>

Кажется, это древняя ошибка / особенность.См. здесь .

Есть ли обходной путь?

Я вообще не могу изменить разметку, поэтому не нужно переносить первую букву в другой элемент вразрешить таргетинг на него без first-letter.

Я не могу использовать вертикальные отступы, так как Firefox сворачивается в другое line-height, чем другие браузеры, даже при line-height, равном нулю, что означает, что я должен был бы нацелиться на FFс различными значениями вертикального заполнения.

Установка display явно на block, inline-block или flex не имеет никакого эффекта.

Настройка height или min-height не имеет никакого эффекта.

Я знаю о inital-letter, но поддержка далека от достаточного.

1 Ответ

0 голосов
/ 21 мая 2018

Я бы настроил поле наверху первой буквы, а затем рассмотрел градиент в качестве фона для основного элемента, чтобы имитировать фон для первой буквы: 

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*/
}
<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>
...