Font-размер кнопки и ссылки

я попробовал этот простой html:

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

и обнаружил, что размер шрифта эта кнопка выглядит больше, чем размер шрифта ссылки, несмотря на стиль. Кто-нибудь знает, почему стиль работает по-разному для ссылки и кнопки, и как сделать их похожими на то же самое?

8
css font-size html

4 ответов

размер шрифта тот же. Но это!--3-->выглядит отличается, потому что шрифт страницы по умолчанию отличается от шрифта входного поля по умолчанию. Установите 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%;
}

чтобы получить согласованные шрифты над страницей и полями формы.

22

имел ту же проблему в Chrome, позже выяснил, что ключевой причиной было 

body {
    -webkit-font-smoothing: antialiased
}

изменить на 

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

исправил.

3

выглядит одинаково для меня, протестировано на Firefox, IE6 и Chrome:http://jsbin.com/oveze
Пожалуйста, имейте в виду:

  • это зависит от браузера и его значений по умолчанию, а также может отличаться в зависимости от операционной системы.
  • очень часто есть другой шрифт для кнопок и полей ввода. Установите его тоже.
  • сглаживание или ClearType может вызвать небольшую разницу, когда у вас нет одинаковых цветов (фон и шрифт.)
1

вы не должны использовать много CSS для кнопок, потому что их отображение зависит от операционной системы пользователя.

вместо этого вы можете использовать, например, изображения.

-4