title: Different line-height in Firefox and Chrome when using text-shadow
body: <p>For some reason, Firefox and Chrome render line-height differently when using text-shadow.</p>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#tracker {
      width:200px;
      color:#999;
      font:normal 12px Verdana,sans-serif;/* Swapped out Arial with Verdana */
  }
  
  #tracker ol {
      float: right;
      margin: 0;
      padding: 0;
      white-space: nowrap;
      list-style: none;
  }
  
  #tracker li {
      float: left;
      margin: 0 0 0 6px;
      padding: 0;
      height: 13px;
      width: 13px;
      color: #666;
      background-color: #ccc;
      border: 1px solid #c0c0c0;
      border-radius: 9px;
      -moz-border-radius: 9px;
      -webkit-border-radius: 9px;
      text-align: center;
      line-height: 13px;
      font-size: 9px;
      text-shadow: 1px 1px 1px #fff;
      overflow: hidden;
  }
  
  #tracker li.current {
      color: #fff;
      text-shadow: -1px -1px 1px #033e69;
      font-weight: bold;
      background-color: #13699e;
      border: 1px solid #369;
  }
  #tracker li span{display:none;}
  #step1:before{content:"1"}
  #step2:before{content:"2"}
  #step3:before{content:"3"}
  #step4:before{content:"4"}​
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="tracker"&gt;
      &lt;span class="steps"&gt;Steps &lt;span id="current-step"&gt;1&lt;/span&gt; of 4&lt;/span&gt;
      &lt;ol&gt;
          &lt;li id="step1" class="current"&gt;&lt;span&gt;Sender&lt;/span&gt;&lt;/li&gt;
          &lt;li id="step2" class="future"&gt;&lt;span&gt;Recipient&lt;/span&gt;&lt;/li&gt;
          &lt;li id="step3" class="future"&gt;&lt;span&gt;Delivery info&lt;/span&gt;&lt;/li&gt;
          &lt;li id="step4" class="future"&gt;&lt;span&gt;Line items&lt;/span&gt;&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the text-shadow is below the text (positive numbers) it presses the text up.</p>
  
  <p><img src="https://i.stack.imgur.com/z7dB6.gif" alt="Tracker-webkit-firefox"></p>
  
  <p>Shouldn't the text be the same no matter where the shadow is rendered? (as shown in FF and IE?)</p>
  
  <p>The only work-around I have found is to increase the line-height (from 13px to 15px) when shadow is below (using positive numbers), but then it screws it up for non-webkit browsers (Firefox and IE).</p>
  
  <p><a href="http://jsfiddle.net/qU5dc/17/" rel="noreferrer">Demo of the problem</a>... Any ideas?</p>
  
  <p><strong>UPDATE:</strong>
  I figured it out and have updated my code. It was a font issue. I was using Arial but when I changed it to Verdana the problem was solved. Very strange!</p>
  
  <p><strong><a href="http://jsfiddle.net/qU5dc/16/" rel="noreferrer">The solution!</a></strong> :)</p>