Firefox 5のCSS行の高さの問題

Question

Firefox 5のページでいくつかの要素を使って縦方向の配置問題に遭遇しています。テキストに行の高さを設定し、高さでは、垂直方向に中央に収まらない。代わりに、行の高さのに固執します。

ここにページがあります：http://www.tyndale.ca/~missiodei/ ここに2つの問題の要素がCSSとともにあります。どちらの場合も、テキストはFF5でプッシュアップされますが、Chrome/Chromiumでは正しく表示されます（行の高さ内で垂直方向に中央に表示されます）。バナーの

• 大型タイトルのリンク（#blogtitle A）

  position:relative; 
  display:block; 
  margin:0; 
  padding:0; 
  color:#fff; 
  text-decoration:none; 
  letter-spacing:.1em; 
  font-family:"Palatino Linotype", Palatino, serif; 
  font-weight:bold; 
  opacity:0.6; 
  height:120px; 
  line-height:120px; 
  

• 本文（p.openingParの新しいセクションの先頭に浮くドロップキャップのいずれかの最初の-letter）

  font-size:3em; 
  font-weight:bold; 
  position:relative; 
  float:left; 
  height:48px; 
  color:#ccc; 
  line-height:48px; 
  margin-right:4px; 
  

あなたはクロームやSafari、シンクを使用してページを見ない限り、あなたはこれらのドロップキャップが表示されない場合があります彼らのほとんどはFFで全く表示されていません。 （なぜこれらのスタイルも尊重されていないのか分かりません）。

最後に、これがFF5に固有の問題であるのか、3.6と4.0に同じ問題があるのか​​を知ることは役に立ちます。私は迅速なテストのためにFFの古いバージョンはありません。

おかげさまで、よろしくお願いいたします。私はこの額に私の頭を打つ私の額に私のキーボードを刻印しました！

Answer 1

セレクタ:first-letterで段落の最初の文字をスタイリングする代わりに、<span class"dropcaps">W</span>を使用してみてください。それが動作するかどうかお知らせください。それが適切に配置見える -

Answer 2

垂直センタリングは、最初の文字スタイリングの

不足が行の高さは、Firefox 5.0を使用して、私のために正常に動作しているhttps://bugzilla.mozilla.org/show_bug.cgi?id=8253