title: Wrong vertical align of text in Google Chrome browser
body: <p>I have problem with creating "button" element (text in inline-block container with border), because in some font-size text has wrong vertical-align (is not perfect middle).</p>
  
  <p>I want to use <a href="https://www.google.com/fonts/specimen/Raleway" rel="noreferrer"><strong>Raleway</strong></a> (Google Web Font) and <a href="http://getbootstrap.com/" rel="noreferrer">Bootstrap</a>.
  Height of the text container is set by line-height. </p>
  
  <p>I am testing it on <strong>Windows 7</strong>...</p>
  
  <p>on <strong>Firefox</strong> (ver. 36) everything is perfect
  <img src="https://i.stack.imgur.com/n8LZx.gif" alt="Firefox (ver. 36)"></p>
  
  <p>but the problem is on Google <strong>Chrome</strong> (ver. 41)
  <img src="https://i.stack.imgur.com/y3REV.gif" alt="Google Chrome (ver. 41)"></p>
  
  <p>Live preview: <a href="http://biznes-dynamit.pl/test/marcin-dobroszek/font/" rel="noreferrer">http://biznes-dynamit.pl/test/marcin-dobroszek/font/</a></p>
  
  <p>Part of CSS code:</p>
  
  <pre><code>/*Bootstrap default style*/
  * {
      box-sizing: border-box;
  }
  .btn {
      display: inline-block;
      vertical-align: middle;
  }
  
  /*custom style*/
  body {
      font-family: "Raleway";
  }
  .btn {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 16px;
      font-size: 11px; /*real height: 8*/
  }
  .btn-sm {
      font-size: 10px; /*real height: 7*/
      line-height: 15px;
   }
  .btn-lg {
      font-size: 12px; /*real height: 8-9*/
      line-height: 16px; /*light, normal*/
   }
  </code></pre>
  
  <hr>
  
  <p>As you can see in Chrome preview in some font-size and font-weight <strong>text is go up</strong> relative container.</p>
  
  <p>3x zoom sample, with font-size: 11px (line-height: 16px) and font-weight: semi-bold. 
  <img src="https://i.stack.imgur.com/yaFYY.gif" alt="wrong vertical space"></p>
  
  <p>Top and bottom space (between text and top/bottom border) should be the same: 4px, but as you can see top space has 3px and bottom has 5px.</p>
  
  <p>Is it possible to fix this browser issue?</p>