title: Alignment issue with input type='range' on chrome (webkit)
body: <p>I am having a bit of alignment issue with styling input range slider in chrome. It works fine on Firefox.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/ehLyhqwt/" rel="nofollow">fiddle</a>.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='box'&gt;&lt;/div&gt;
      &lt;input type='range' class='range'/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have given the box in the left for reference. In <a href="http://imgur.com/6hUPwGv" rel="nofollow">Firefox</a> the input control aligns vertically central against the box, while in <a href="http://imgur.com/voUaRBD" rel="nofollow">chrome</a> it is aligned to the top.</p>
  
  <p>CSS: </p>
  
  <pre><code>.container {
      height: 80px;
      width: 220px;
      background-color: green;
      overflow: auto;
      padding: 10px;
  }
  
  .box {
      height: 20px;
      width: 20px;
      float: left;
      background-color: blue;
      margin-right: 5px;
  }
  
  input {
      float: left;
  }
  
  input[type=range]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    width: 100%;
    height: 7px;
    cursor: pointer;
    background: #b4b4b4;
  
  }
  
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 8px;
    height: 20px;
    cursor: pointer;
    background: #f0f0f0;
    margin-top: -6px;
  }
  
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 7px;
    cursor: pointer;
    background: #b4b4b4;
  }
  
  input[type=range]::-moz-range-thumb {
    height: 20px;
    width: 8px;
    cursor: pointer;
    background: #f0f0f0;
  }
  </code></pre>
  
  <p>I tried adding a margin-top for webkit, but it is giving a white patch on top as shown in this updated <a href="http://jsfiddle.net/ehLyhqwt/1/" rel="nofollow">fiddle</a>. Not sure why.</p>
  
  <pre><code>input[type=range]::-webkit-slider-runnable-track {
    margin-top: 6px;
  }
  </code></pre>
  
  <p>Any better ideas?</p>