title: css padding issue on chrome
body: <p>I have designed a navigation list using css. Below is my code</p>
  <pre class="lang-css prettyprint-override"><code>ul#mainnavigation li a {
      font: 14px/20px 'Open Sans', Open Sans, Helvetica, Arial, sans-serif;
      position:relative;
      font-weight:600;
      color:#686868;
      margin:0;
      padding:0 19.7px;
      height:50px;
      line-height:50px;
      display:inline-block;
      -webkit-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
      -moz-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
      -o-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
      transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
      z-index:100;
  }
  </code></pre>
  <p>The problem that I'm having is in firefox it works perfectly but in chrome the last navigation element is gone below.</p>
  <p>In firefox <code>padding:0 25.7px;</code> gives the correct results</p>
  <p>In chrome <code>padding: 0 26.5px;</code> gives the correct results</p>
  <p>How can I make sure that the padding works on both the browsers correctly?</p>
  <p>Note: I have defined the doctype as <code>&lt;!DOCTYPE html&gt;</code></p>