Chrome 元素的垂直对齐需要多 10 像素答案

【问题标题】：Vertical align of elements needs 10px more for ChromeChrome 元素的垂直对齐需要多 10 像素
【发布时间】：2014-07-01 21:16:13
【问题描述】：

我正在尝试使用 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
}

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

非常感谢

【问题讨论】：

你试过删除默认浏览器的样式吗？
如果使用 line-height: 1; 会发生什么？线高仍然是不同的大小吗？您是否尝试过使用不同的字体并且它可以正常工作？我的建议是使用 padding-top （因为已知 line-height 以 px 为单位在不同的浏览器中显示不同），但这真的取决于你的需要。
所有评论都已被使用。我认为唯一的答案是使用特殊字体“幸运的家伙”，因为任何其他正常字体都可以正常工作。唯一的解决方案是对 IE9 使用不同的样式表，对 IE10+ 使用 hack。感谢您的宝贵时间！

【解决方案1】：

box-sizing: content-box;

应该在 chrome 中修复它。

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

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

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

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

【讨论】：

【解决方案2】：

解决方案是使用 IE9 的样式表，使用正常的 line-height 和 height 组合，IE10+ 的 hack：

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

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

“Luckiest Guy”字体的使用在现代浏览器中以这种方式呈现。

【讨论】：