Как пофиксить отступ в кнопках для Chrome?

Question

[monochromer]

Всем привет!

Есть кнопки с кодом (еще подключен normalize 3.0.2)

button {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0;
  height: auto;
  line-height: 1;
  border: 2px solid #39f;
  text-transform: uppercase;
  background: #fff;
}

Пример


Для Chrome снизу кнопки появляется дополнительный отступ. Как можно поправить?

Answer 1

[iBird Rose]

никак. браузеры рендерят шрифты каждый по своему.

Comments

[monochromer]

Печаль для дизайнера

Answer 2

[Александр Филиппенко]

Особенно с нестандартными шрифтами такое часто бывает. Можно подобрать font-size и line-height при которых всё встанет ровно, но если важно соблюсти размеры из макета, то это проблема.

Comments

[monochromer]

Да, удавалось задать различные line-height для Chrome и Firefox помощью хаков, но меня это не устраивает.

[Александр Филиппенко]

monochromer: Я не про это. Меняя размер шрифта можно в какой-то момент получить одинаковую картинку... В некоторых случаях... При определённых значениях отличающихся на какой-то шаг (обычно 4 или 5) можно получить то, что нужно. Но это бред конечно таким заниматься. Просто сам факт.

Answer 3

[Sergej]

monochromer: Делайте под хром в первую очередь, если не возможно реализовать одинаково под все браузеры и тем более платформы.
Разница windows и osx тоже имеет место быть.

Answer 4

[dom1n1k]

Никак. Базовая линия плавает в разных браузерах и осях.
Если принципиально нужно выровнять всё до пикселя с абсолютной кроссбраузерностью, то единственный выход - сделать кнопку картинкой.

Comments

[Сергей Константинов]

Только не жпегом ). SVG например

[dom1n1k]

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