我正在使用 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
}
有人知道为什么会这样吗?有人试验过类似的东西吗?有任何解决方法或解决方案吗?
非常感谢
最佳答案
box-sizing: content-box;
应该在 chrome 中修复它。
.btn::-moz-focus-inner { margin-top: -5px; }
应该在 firefox 中修复它(设置适当的边距)。
标准似乎对表单特别糟糕,因此在这个领域使用默认样式通常是明智的,以便让它们在所有浏览器中看起来都不错,而无需太多 hack。
另一件需要考虑的事情是使用重置(或规范化)样式表 - 这些尝试使所有浏览器的行为相同,并且可以帮助解决很多像这样的挫折。这是一个可以解决您的问题的流行方法:http://necolas.github.io/normalize.css/
关于fonts - 对于 Chrome,元素的垂直对齐需要多 10px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24439150/