title: overflow:hidden + display:inline-block moves text upwards
body: <p>I have following HTML:</p>
  
  <pre><code>&lt;div&gt;
      a&lt;span style="overflow: hidden; display: inline-block;"&gt;b&lt;/span&gt;c
  &lt;/div&gt;
  </code></pre>
  
  <p>What I expect to see: <code>abc</code>.</p>
  
  <p>What I see (in Chrome, Safari, Firefox): <img src="https://i.stack.imgur.com/cpC6M.png" alt="abc"> </p>
  
  <p><code>b</code> is higher than <code>a</code> and <code>c</code>. Why it is so and how to fix it?</p>