title: Opacity in IE8 works on <p> but not on <a>
body: <p>I have a problem with IE8 where I cannot make <code>&lt;a&gt;</code> elements transparent. I've found these related SO questions but I haven't had any luck with the answers provided there:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/1948176/opacity-css-not-working-in-ie8">Opacity CSS not working in IE8</a></li>
  <li><a href="https://stackoverflow.com/questions/859000/opacity-in-web-pages">Opacity in web pages?</a></li>
  </ul>
  
  <p>I've tried "<a href="http://www.satzansatz.de/cssd/onhavinglayout.html" rel="nofollow noreferrer">giving layout</a>", by using <code>zoom: 1;</code>, but it hasn't helped. Here is my test CSS, lifted from the example on <a href="http://www.quirksmode.org/css/opacity.html" rel="nofollow noreferrer">this page</a>:</p>
  
  <pre><code>.test {
    background-color: #6374AB;
    width: 100%;
    color: #ffffff;
    zoom: 1;
  }
  .opaque1 {
    opacity: .5;
  }
  .opaque2 {
    filter: alpha(opacity=50);
  }
  .opaque3 {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  }
  .opaque4 {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
  }
  </code></pre>
  
  <p>And the test HTML:</p>
  
  <pre><code>&lt;p class="test"&gt;Test paragraph without opacity.&lt;/p&gt;
  &lt;p class="test opaque1"&gt;Test paragraph with &lt;code&gt;opacity&lt;/code&gt;&lt;/p&gt;
  &lt;p class="test opaque2"&gt;Test paragraph with &lt;code&gt;filter&lt;/code&gt;&lt;/p&gt;
  &lt;p class="test opaque3"&gt;Test paragraph with &lt;code&gt;-ms-filter&lt;/code&gt;&lt;/p&gt;
  &lt;p class="test opaque4"&gt;Test paragraph with compatibility note&lt;/p&gt;
  
  &lt;p&gt;
    &lt;a class="test" href="#"&gt;Test anchor without opacity.&lt;/a&gt;&lt;br/&gt;
    &lt;a class="test opaque1" href="#"&gt;Test anchor with &lt;code&gt;opacity&lt;/code&gt;&lt;/a&gt;&lt;br/&gt;
    &lt;a class="test opaque2" href="#"&gt;Test anchor with &lt;code&gt;filter&lt;/code&gt;&lt;/a&gt;&lt;br/&gt;
    &lt;a class="test opaque3" href="#"&gt;Test anchor with &lt;code&gt;-ms-filter&lt;/code&gt;&lt;/a&gt;&lt;br/&gt;
    &lt;a class="test opaque4" href="#"&gt;Test anchor with compatibility note&lt;/a&gt;&lt;br/&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>In IE8, the <code>opaque2</code>, <code>opaque3</code>, and <code>opaque4</code> paragraphs are transparent, but none of the anchors are. In IE6, the <code>opaque2</code> and <code>opaque4</code> paragraph <em>and</em> anchor both have transpareny.</p>