Google Chrome浏览器中文本的垂直对齐方式错误

Question

我有创建"按钮"元素(带有边框的内联块容器中的文本)的问题,因为在某些字体大小的文本中有错误的垂直对齐(不是完美的中间).

我想使用Raleway(Google Web Font)和Bootstrap.文本容器的高度由line-height设置.

我在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(行高:16px)和font-weight:半粗体.

顶部和底部空间(文本和顶部/底部边框之间)应该相同:4px,但正如您可以看到顶部空间有3px而底部有5px.

是否可以修复此浏览器问题？

Answer 1

这个非常烦人的问题是由于chrome没有text-transform: uppercase考虑到而造成的。使用以下命令在 Chrome 中使用全大写文本获得正确的居中位置：

text-transform: lowercase;
font-variant: small-caps;

小提琴： http: //jsfiddle.net/fyvyB/76/

非常适合按钮，对于其他用例，您可能会遇到文本为小型大写字母而不是真正的大写字母的问题。