title: CSS line-height renders differently between safari and chrome
body: <p>The line-height has a different rendering between Chrome and Safari. The text "+" is not perfectly centered on Safari, while the rendering is perfect on Chrome.</p>
  
  <p><a href="https://i.stack.imgur.com/9MkgL.png" rel="nofollow noreferrer">Problem visible here</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="#" class="btn"&gt;+&lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>Anybody knows why this happen?</p>
  
  <p><a href="https://codepen.io/anon/pen/ypJdmL" rel="nofollow noreferrer">Codepen</a></p>