title: Background-image margin on button in IE
body: <p>Does someone know why there is a margin (about 1px) around the button background-image, only in Internet Explorer ?</p>
  
  <p>Try this code in IE vs Firefox :</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;style type='text/css'&gt;
          button {
              background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
              border: 1px solid black;
              font-size: 24px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;button&gt;LOL&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is how it is displayed on my computer in IE9 (in big size) : </p>
  
  <p><img src="https://i.stack.imgur.com/mdfUD.png" alt="button with background-image margin in IE"></p>
  
  <p>Notice : If I remove the (black) border, the margin disappears.</p>
  
  <p>Thanks.</p>