css - イニシャル-CSS：2行以上の最初の文字

Question

<p>要素で大きなイニシャルを作成しようとしています。これは、sencond行から始まり、2行をカバーする必要がありますが、Firefoxでは、最初の文字が期待どおりに配置されていません（IEでも、FFだけが問題を引き起こします... ）。

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

同じレベルで開始する方法はありますか？

Answer 1

これは私にとってはうまくいきましたが、あまりエレガントではありません。

:first-letterしたがって、垂直方向に整列する疑似要素を使用してクロスブラウザのドロップキャップ効果を得るには、適用float: leftしてから、タイプフェイスキャップの高さの高さを見つけ、行の高さをそれに減らし、Firefoxで正しく整列するようにmargin-topを調整する必要があります。 OperaまたはWebKitブラウザーで、IEのみのスタイルシートに条件付きコメントを使用すると、margin-topが削除され、line-heightが変更されて、タイプが正しく垂直方向に整列されます。

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/