相关疑难解决方法(0)

我有创建"按钮"元素(带有边框的内联块容器中的文本)的问题,因为在某些字体大小的文本中有错误的垂直对齐(不是完美的中间).

我想使用Raleway(Google Web Font)和Bootstrap.文本容器的高度由line-height设置.

我在Windows 7上测试它...

在Firefox(第36版)上,一切都很完美

但问题出在Google Chrome上(第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*/ …

这个问题与此相关。

评论之一建议在APP STORE BADGE图片周围添加一个边距，以匹配默认情况下包含边距的GOOGLE PLAY STORE BADGE。

尝试了一段时间以操纵GOOGLE PLAY STORE BADGE在其上裁切边距后（例如在此示例中）。哪种工作，但无法裁剪图像的正确边缘。

所以加入margin-top，margin-bottom，margin-right，margin-left在APP Store标志的大小比例似乎更可靠。

我的问题是我们应该在CSS类中使用哪些值：

.margin-apple-badge {
  margin: X %
}