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

Question

我在创建＆＃34;按钮＆＃34;时遇到问题element（带边框的内联块容器中的文本），因为在某些字体大小的文本中有错误的vertical-align（不是完美的中间）。

我想使用Raleway（Google网络字体）和Bootstrap。 文本容器的高度由line-height设置。

我正在 Windows 7 ...

上测试它 Firefox （版本36）

一切都很完美

但问题出在谷歌 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/

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

Answer 2

自定义字体也有类似的问题。经过反复尝试并尝试了text元素上的所有不同显示属性之后，我注意到，尽管上述text元素设置为display: block;，但垂直对齐问题仅影响父元素为display: inline;的文本元素。我通过将父母更改为display: table;并将子文本elem更改为display: inline;来解决了这个问题，例如下面...我无法解释为什么这样做，但是在这里发帖以防其他人...

<style>
  div {
    display: table;
  }
  span {
    display: inline;
    padding: 5px 10px; /* to make v-alignment clearer */
  }
</style>
<div>
  <span>Some text here</span>
</div>

Answer 3

这是因为你强迫line-height。尝试删除line-height属性。