CSS line-height在safari和chrome之间呈现不同

Question

行高在Chrome和Safari之间有不同的呈现方式。文字＆＃34; +＆＃34;并不是完美地集中在Safari上，而渲染在Chrome上是完美的。

Problem visible here

HTML：

<a href="#" class="btn">+</a>

CSS：

border-radius: 50%;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .2);
display: block;
font-size: 35px;
height: 60px;
line-height: 60px;
padding: 0;
width: 60px;

有人知道为什么会这样吗？

Codepen