title: Image scaling causes poor quality in firefox/internet explorer but not chrome
body: <p>See <a href="http://jsfiddle.net/aJ333/1/" rel="noreferrer">http://jsfiddle.net/aJ333/1/</a> in Chrome and then in either Firefox or Internet Explorer. The image is originally 120px, and I'm scaling down to 28px, but it looks bad pretty much no matter what you scale it down to.</p>
  
  <p>The image is a PNG and it has an alpha channel (transparency).</p>
  
  <p>Here's the relevant code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="http://tinypic.com?ref=2z5jbtg" target="_blank"&gt;
      &lt;img src="http://i44.tinypic.com/2z5jbtg.png" border="0" alt="Image and video hosting by TinyPic"&gt;
  &lt;/a&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>a {
      width: 28px;
      height: 28px;
      display: block;
  }
  
  img {
      max-width: 100%;
      max-height: 100%;
      image-rendering: -moz-crisp-edges;
      -ms-interpolation-mode: bicubic;
  }
  </code></pre>
  
  <p>The <code>image-rendering</code> and <code>-ms-interpolation-mode</code> lines of CSS didn't seem to do anything, but I found them online while doing some research on the problem.</p>