title: anchor button background images aren't displaying as expected on android stock browser.
body: <p>I have some buttons which display fine in chrome but on stock android browser the images appear smaller than what they are.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="col-postSocial"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a class="fb" href="http://www.facebook.com/share.php?u=&lt;?php the_permalink(); ?&gt;"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="twit" href="http://twitter.com/share?url=&lt;?php the_permalink(); ?&gt;" target="_blank"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="ggl" href="https://plus.google.com/share?url=&lt;?php the_permalink(); ?&gt;"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="pin" href="http://pinterest.com/pin/create/link/?url=&lt;?php the_permalink(); ?&gt;" target="_blank"&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.col-postSocial {
      width:100%;
      margin-top:20px;
      margin-bottom:10px;
      text-align:center;
      float:none;
  }
  .col-postSocial li {
      display:inline-block;
  }
  .col-postSocial a {
      display:block;
      height:50px;
      width:50px;
  }
  .fb {
  background:url('../images/facebook.png') #3b5998;
  }
  .twit {
  background:url('../images/twitter.png') no-repeat top #00aced;
  }
  .ggl { background:url('../images/google_plus.png') no-repeat top #dd4b39;
  }
  .pin {
  background:url('../images/pinterest.png') no-repeat top #cb2027;
  }
  </code></pre>
  
  <p>I'm not sure what to change to make this work on androids stock browser, surely this should work right?</p>
  
  <p>The images are 50 x 100px png but on android the images look more like 25 x 50px, the boxes are still 50x50 so what is causing this?</p>