奇妙なCSSの問題 - <a>のテキストのタグが "プッシュダウン"

Question

私は奇妙な問題を抱えています。

ハイパーリンクのタグで囲まれたテキストは、余分な「行の高さ」プロパティが適用されているかのように少し押し下げられますが、このプロパティが呼び出される場所はわかりませんCSSで

例：ページの右側にある[iTunes→Winamp→WindowsMedia]をクリックします。 "Listen via"部分は正常ですが、ハイパーリンクが後に来ると、ほぼ同じような行の高さを持つようになります。

私はウェブサイトの.cssファイルを直接コーミングしていましたが、Chromeの要素インスペクタを使用してコードをスヌープしましたが、ハイパーリンクされたテキストをわずかに見えるようにすることはできません。

誰にもアイデアはありますか？私はSafariの要素インスペクタでこの行をキャンセルする場合

Answer 1

あなたのreset.cssライン20は

vertical-align: middle; 

を含み、当該のテキストはバック「を介して聞いて...」と一直線に飛び込みました。

あなたはラインで開始ブロックであるstyle.cssに

vertical-align: top; 

を追加することによって、これをオーバーライドすることができます166

元の問題は、高さの違いに起因する可能性がありますそのフォントの標準テキストとリセットCSSが適用された<a>要素の高さです。

Answer 2

FireFoxでは、リンクがわずかにと表示されます。テキストはです。 style.css内のaタグの下のパディングを無効にすると、それらをテキストであっても元に戻すことができます。

Chromeでは、reset.cssからvertical-align: middleを無効にすると問題が解決されたようです。それはCSSのリセットのための奇妙な設定のように思えます。この同じ変更は、パディングを変更せずにFireFoxの表示を修正します。

ChromeとFireFoxの表示の違いが小さいことを考慮して、異なるCSSリセットを検討することをおすすめします。

Answer 3

のライン20には、あなたのreset.cssテキストが押されている理由です

vertical-align: middle; 

を持っています。

シンプルに削除するか、リンク上でtopに変更してください。