10

この単純なhtmlを試しました：

TEST FONT SIZE</br>
<input type="button" value="test bytton" style="font-size:20px">
<a style="font-size:20px">test link</a>

スタイルにもかかわらず、このボタンのフォント サイズがリンクのフォント サイズよりも大きく見えることがわかりました。リンクとボタンのスタイルが異なる理由と、それらを同じように見せる方法を知っている人はいますか?

4

4 に答える 4

25

フォントサイズは同じです。しかし、デフォルトのページ フォントがデフォルトの入力フィールド フォントと異なるため、見た目が異なります。両方の要素を同じに設定するfont-familyと、同じように見えます。

私は通常、次のことを行います。

body, input, button, select, option, textarea {
    font-family: ...; /* whatever font */
}
body {
    font-size: x%; /* whatever base font size I want */
}
input, button, select, option, textarea {
    font-size: 100%;
}

ページとフォーム フィールドで一貫したフォントを取得します。

于 2009-09-30T09:38:11.660 に答える
4

Chrome で同じ問題が発生しましたが、後で主な原因が

body {
    -webkit-font-smoothing: antialiased
}

これをに変更

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

それを修正しました。

于 2013-06-20T23:37:12.577 に答える
1

私には同じように見え、Firefox、IE6、および Chrome でテストされています: http://jsbin.com/oveze
心に留めておいてください:

  • これはブラウザとそのデフォルトに依存し、オペレーティング システムによっても異なる場合があります。
  • ボタンと入力フィールドのフォントが異なることがよくあります。それも設定してください。
  • アンチエイリアシングまたは ClearType は、同じ色 (背景とフォント) がない場合にわずかな違いを引き起こす可能性があります。
于 2009-09-30T09:39:06.773 に答える
-5

ボタンの表示はユーザーのオペレーティングシステムに依存するため、ボタンには多くのCSSを使用しないでください。

代わりに、たとえば画像を使用できます。

于 2009-09-30T09:14:10.173 に答える