0

背景を追加して achor タグ ボタンを作成しようとしています。chrome と safari では問題ないように見えますが、firefox 15.0.1 にはバグがあるようです。

たとえば、http://jsfiddle.net/cqVjj/3/は、テキストが垂直方向に中央揃えされていないことを示しています。パディング、幅、または高ささえ指定しませんでしたが、クロムと同様の結果を期待しています。Firefox 下部にスペースが表示されます。

解決策はありますか？

クローム 21.0.1 クロム

ファイアフォックス 15.0.1 ファイアフォックス

4

3 に答える 3

0

これはブラウザ全体で一貫していません。間隔とパディングのバランスをとることをお勧めします。ここの例を参照してください：

http://jsfiddle.net/exzRT/

不思議なことに、フォントを「Arial」のようなサンセリフフォントに変更すると便利です。

于 2012-10-10T17:43:09.120 に答える
0

レンダリングは、ブラウザーが使用している正確なフォントと、それらのフォントに使用することを決定した正確なアセントおよびディセント メトリックに依存します。フィドルで同じフォントファミリを使用するように指示していないことに注意してください。

しかし、それを過ぎても、この問題について CSS2.1 が言わなければならないことは ( http://www.w3.org/TR/CSS21/visudet.html#inline-non-replacedから):

The height of the content area should be based on the font, but this
specification does not specify how. A UA may, e.g., use the em-box or
the maximum ascender and descender of the font.

あなたが見ているブラウザは、実際にはインラインのコンテンツ領域の異なる定義を使用しているだけだと思います。

于 2012-10-11T04:39:04.237 に答える
0

簡単な修正:

line-height属性がありません。と同じ値でなければなりませんfont-size:

line-height: 34px;

jsfiddle を更新しました: http://jsfiddle.net/cqVjj/4/

于 2012-10-10T17:16:35.940 に答える