Неверное вертикальное выравнивание текста в браузере Google Chrome

Question

У меня проблема с созданием элемента «button» (текст в контейнере inline-block с рамкой), потому что в некотором тексте шрифта неправильный вертикальный выровненный (не идеальный средний) ,

Я хочу использовать Raleway (Google Web Font) и Bootstrap. Высота текстового контейнера задается высотой строки.

Я проверяю его на Windows 7 ...

на Firefox (вер. 36) все идеально

, но проблема заключается в Google Chrome (вер. 41)

Предварительный просмотр в прямом эфире: http://biznes-dynamit.pl/test/marcin-dobroszek/font/

Часть кода CSS:

/*Bootstrap default style*/ 
* { 
    box-sizing: border-box; 
} 
.btn { 
    display: inline-block; 
    vertical-align: middle; 
} 

/*custom style*/ 
body { 
    font-family: "Raleway"; 
} 
.btn { 
    padding-top: 0; 
    padding-bottom: 0; 
    line-height: 16px; 
    font-size: 11px; /*real height: 8*/ 
} 
.btn-sm { 
    font-size: 10px; /*real height: 7*/ 
    line-height: 15px; 
} 
.btn-lg { 
    font-size: 12px; /*real height: 8-9*/ 
    line-height: 16px; /*light, normal*/ 
} 

---

Как вы можете видеть в Chrome просмотра в некоторых размера шрифта и начертание шрифта текст идти вверх относительно контейнера.

3-кратный зум-образец с размером шрифта: 11px (line-height: 16px) и font-weight: полужирный.

Верхнее и нижнее пространство (между текстом и верхней/нижней границей) должны быть одинаковыми: 4px, но, как вы видите, верхнее пространство имеет 3px, а нижнее - 5 пикселей.

Можно ли исправить эту проблему с браузером?

Answer 1

Это потому, что вы вынуждаете line-height. »Попробуйте удалить line-height собственности.