css中fontSize与lineHeight在Mac下会出现滚动条？

Question

<div class="hd-col">
  <div class="box">
    <span class="i-b">11AGg</span>
    <span class="i-b">个靠</span>
  </div>
</div>

.hd-col{
  border: 1px solid #000;
  box-sizing: border-box;
}
.box{
  overflow: auto;
}
.i-b{
  display: inline-block;
/*   font-family: "PingFang SC"; */
  font-size: 30px;
  line-height: 40px;
  background: red;
}

在codepen上编辑

上面的代码，在 mac 下会出现竖向滚动条，在 win 上没有。想问下为什么会出现这样的问题，以及如何解决它？

要求：

• box 的 overflow: auto; 属性不能去掉。

已知

• lineHeight >= 42px 时滚动条消失，但是不知道为什么。
  如果是不同系统对字体处理有差异的话，30px字体配30px行高或许会出现这个问题还能理解，可这差着10px呢。

Answer 1

幽灵盒子导致的。把标签缝隙全删了试试。

Answer 2

  -webkit-text-size-adjust: none; /* 解决 Mac 下出现滚动条的问题 */

在fontsize那里加上这个
不过这样做可能会影响到 Safari 浏览器中其他文本的大小，需要对应进行测试和调整。