Chrome的垂直对齐元素需要10px

Question

我正在使用字体Luckiest Guy尝试一个奇怪的问题。

我有一些按钮，一个宽度和高度的元素，并且为了垂直对齐文本，我使用相同的高度和行高。这是有用的，这是一个CSS技巧，但我需要10倍以上的行高来在Chrome，FireFox和Safari中垂直对齐文本!!

适用于Chrome / FF / Safari

.btn {
    height: 30px;
    line-height: 40px // need 10 px more to be vertically aligned!
}

适用于IE9 +

.btn {
    height: 30px;
    line-height: 30px // normally aligned
}

有人知道为什么会这样吗？有没有人尝试过类似的东西？任何解决方法或解决方案吗？

Thnx很多

Answer 1

box-sizing: content-box;

应该用chrome修复它。

.btn::-moz-focus-inner { margin-top: -5px; }

应该在firefox中修复它（设置适当的边距）。

标准对于表单看起来特别糟糕，因此使用默认样式的区域通常是合理的，以便在没有太多黑客攻击的情况下使它们在所有浏览器中看起来都不错。

要考虑的另一件事是使用重置（或规范化）样式表 - 这些尝试使所有浏览器的行为相同，并且可以帮助解决许多这样的挫折。这是一个适用于您的问题的热门问题：http://necolas.github.io/normalize.css/

Answer 2

解决方案是使用IE9的样式表，使用行高和高度的正常组合，IE10 +的黑客攻击：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

并为其余浏览器使用10px行高。

使用“幸运的家伙”＃39;字体在现代浏览器中以这种方式呈现。