INITIALS - CSS: первая буква над двумя строками

Я пытаюсь создать большие инициалы в <p> которые должны начинаться на линии sencond и охватывать две строки, но в firefox первая буква не помещается так, как я ожидаю (работает везде, даже в IE, только FF создает проблемы...)

http://jsfiddle.net/6SfHG/1/

First letter problem

Любые идеи, как заставить его начинать на одном уровне?

Ответы

Ответ 1

Это сработало для меня, хотя это не очень элегантно:

Таким образом, чтобы получить кросс-браузерный эффект буквицы, используя :first-letter псевдоэлемент по :first-letter который выровнен по вертикали, вам нужно применить float: left, затем найти высоту высоты колпачка гарнитуры, уменьшить линейную высоту, отрегулировать margin- top, чтобы он правильно выровнялся в Firefox и в Opera или в браузере WebKit, а затем с помощью условных комментариев только для таблицы стилей IE удалите margin-top и измените высоту строки, чтобы правильно выровнять тип по вертикали.

p::first-letter {
  float: left;
  font-family: Georgia, serif;
  font-size: 75px;
  line-height: 60px;
  padding: 3px;
}

http://nickcowie.com/2009/drop-caps-first-letter-and-firefox/