fonts - 对于 Chrome，元素的垂直对齐需要多 10px

Question

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

我有一些按钮，一个具有宽度和高度的元素，为了垂直对齐文本，我使用了相同的高度和行高。这行得通，这是一个 css 技巧，但我需要多 10px 行高才能在 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
}

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

非常感谢

Answer 1

box-sizing: content-box;

应该在 chrome 中修复它。

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

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

标准似乎对表单特别糟糕，因此在这个领域使用默认样式通常是明智的，以便让它们在所有浏览器中看起来都不错，而无需太多 hack。

另一件需要考虑的事情是使用重置(或规范化)样式表 - 这些尝试使所有浏览器的行为相同，并且可以帮助解决很多像这样的挫折。这是一个可以解决您的问题的流行方法:http://necolas.github.io/normalize.css/