title: Inline-block and line-height rendering differently on Chrome, Safari and Firefox
body: <p>I style <code>code</code> tags as follows:</p>
  
  <pre><code> code {
     display: inline-block;
     white-space: no-wrap;
     background: #fff;
     font-size: .8em;
     line-height: 1.5em;
     color: #555;
     border: 1px solid #ddd;
     -webkit-border-radius: 0.4em;
     -moz-border-radius: 0.4em;
     -ms-border-radius: 0.4em;
     -o-border-radius: 0.4em;
     border-radius: 0.4em;
     padding: 0 .3em;
     margin: -1px 0;
     overflow: hidden;
     background-clip: padding-box;
     -webkit-background-clip: padding-box;
   }
  </code></pre>
  
  <p>and here is how it renders on</p>
  
  <ul>
  <li>Safari (correct)<br /><img src="https://i.stack.imgur.com/RgLkG.png" alt="enter image description here"></li>
  <li>Chrome (incorrectly aligned)<br /><img src="https://i.stack.imgur.com/sT5D5.png" alt="enter image description here"></li>
  <li>Firefox (incorrectly aligned)<br /><img src="https://i.stack.imgur.com/etztd.png" alt="enter image description here"></li>
  </ul>
  
  <p>I find it strange especially that Chrome and Safari are rendering differently. What can be done here to bring the vertical alignment back to the same baseline as the normal text?</p>