ios - css line-height 不适用于移动设备

Question

我尝试在我的 hyprid 应用程序( ionic )中使用 line-height 将一些元素垂直居中对齐

我基本上是怎么做的:

.wrapper {
    height: 35px;
  }

.item {
    background: lightgreen;
    float: left;
    height: 100%;
  }

.item span {
    line-height:35px;
  }

<div class="wrapper">
   <div class="item">
     <span class="icon-check"></span>
     <span>818</span>
   </div>   
</div>

什么不起作用:

在 chrome 开发者模式下一切正常:文本与绿色容器完美对齐。

..但是当我在我的设备上呈现应用程序时(iphone4s ios8.4.1 应用程序: ionic View )文本不再垂直居中:

例如:如果您看一下眼睛图标旁边的“2”，您会发现“2”并不完全垂直

我的问题:为什么在桌面浏览器和移动应用程序中显示的文本有所不同？我可以解决这个问题吗？

谢谢

PS:也尝试过使用 flex 和 table-cell 来垂直居中，但是这两种方法在桌面和移动设备上都有相同的小差异

编辑:我使用 translate(-50%) 和 line-height: 1 再次对齐了 interms；这是我的结果:

更改字体系列后:

因此字体系列负责渲染问题。我必须选择其他字体还是有办法用给定的字体来解决这个问题？ (在没有出现的桌面版本上..一切看起来都很棒)

Answer 1

我和你有同样的问题，发现是字体的问题......太奇怪了，无法理解。它在除 IOS chrome 之外的任何设备上都能完美运行。