Google Chrome浏览器中文本的垂直对齐错误
我在创建“按钮”元素(在带边框的内联块容器中的文本)方面有问题，因为在某些字体大小的文本中，垂直对齐是错误的(中间不是完美的)。
我想使用罗利威 (Google )和引导。文本容器的高度按行高设置.
我正在视窗7上测试它.
在火狐上。一切都很完美
但问题在于谷歌Chrome (ver )。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中看到的，在某些字体大小和字体权重的文本中预览是向上的相对容器。
3x缩放样本，字体大小:11 3x(线高:16 3x)，字体重:半粗体。
顶部和底部的空间(在文本和上下边框之间)应该是相同的: 4px，但是正如您所看到的，顶部空间有3px，底部有5px。
有可能解决这个浏览器问题吗？
回答 2
Stack Overflow用户
发布于 2018-05-18 08:51:11
这个非常恼人的问题是由铬没有考虑到text-transform: uppercase造成的。使用以下方法可以在Chrome中得到正确的全大写文本对齐：
text-transform: lowercase;
font-variant: small-caps;小提琴：http://jsfiddle.net/fyvyB/76/
对于按钮来说，效果很好，对于其他用法来说，你可能会遇到一些问题，比如文本是小大写，而不是真正的大写。
Stack Overflow用户
发布于 2018-07-25 13:33:10
自定义字体也有类似的问题。在尝试了文本元素上所有不同的显示属性之后，我注意到垂直对齐问题只影响父元素为display: block;的文本元素，尽管上述文本元素被设置为display: inline;。我解决了这个问题，把父母换成display: table;，把孩子的短信换成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>https://stackoverflow.com/questions/29366908
复制相似问题
腾讯云开发者
