0

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

私のページhttp://radiovalerie.org/では、ハイパーリンク タグで囲まれたテキストがわずかに押し下げられます。あたかも追加の「行の高さ」プロパティが適用されているかのようですが、このプロパティがどこにあるのかわかりません。 CSS から呼び出されます。

例：ページ右側の「→iTunes・Winamp・WindowsMediaで聴く」。「リッスン ビア」の部分は正常ですが、その後にハイパーリンクが表示されるようになると、行の高さが異なるように見えます。

Web サイトの .css ファイルを直接調べたり、Chrome の要素インスペクタを使用してコードを調べたりしましたが、ハイパーリンクされたテキストが少しずれて見える原因を突き止めることはできません。

誰にもアイデアはありますか？

4

3 に答える 3

2

あなたの reset.css 行 20 には含まれています

vertical-align: middle;

Safari 要素インスペクターでこの行をキャンセルすると、問題のテキストが「Listen via...」に沿ってジャンプして戻りました。

追加することでこれをオーバーライドできます

vertical-align: top;

166 行目から始まるブロックの style.css に追加します。

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

于 2012-04-17T13:48:01.087 に答える
2

reset.cssあなたが持っているあなたの20行目に

vertical-align: middle;

そのため、テキストがプッシュされています。

簡単に削除するかtop、リンクに変更してください。

于 2012-04-17T13:51:08.003 に答える
0

FireFox では、リンクはテキストよりもわずかに高く表示されます。style.css の a タグの下部のパディングを無効にすると、テキストと同じ位置に戻ります。

Chrome では、vertical-align: middlereset.css を無効にすると問題が解決するようです。これは、css リセットの奇妙な設定のようです。この同じ変更により、パディングを変更せずに FireFox の表示も修正されます。

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

于 2012-04-17T13:49:27.357 に答える