手机浏览器css差异问题,手机和桌面之间的CSS行高属性差异

在桌面浏览器(Firefox 51，Chrome 56，IE 11.576，Edge 38)中，徽标完美工作，它看起来象点完美，正如我们的设计文档指定的那样。

但是在移动设备中，行高属性似乎工作不正确。 Opera很好，但Firefox和Chrome不能按预期工作。

手机截图imgur专辑，因为我还没有足够的声誉：http://imgur.com/a/Ij3cF

这是专门为标志的特定部分的CSS代码：

#LogoGeek {

display: inline-block;

background-color: rgb(90, 186, 71);

font-family: "ForcedSquare";

font-size: 90px;

line-height: .72;

height: .74em;

padding: 0 .05em 0 .12em;

vertical-align: middle;

}

“ForcedSquare”是Web字体，我们添加到该网站。

我在移动Chrome浏览器中使用了Remote Dev Tools功能，发现如果将line-height更改为.87，它可以按预期工作，但是，我觉得这是一个可笑的修复方法。

据我所看，这似乎是某种问题与特定的字体。但是为什么没有与桌面和/或Opera Mobile的所有不同浏览器打交道，我不得不想。

有没有更好的方法来调整它，或使其在所有浏览器中正常工作？ 谢谢大家！

2017-02-26

Tamh