Opacity in IE8 works on <p> but not on <a>

Question

I have a problem with IE8 where I cannot make <a> elements transparent. I've found these related SO questions but I haven't had any luck with the answers provided there:

• Opacity CSS not working in IE8
• Opacity in web pages?

I've tried "giving layout", by using zoom: 1;, but it hasn't helped. Here is my test CSS, lifted from the example on this page:

.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);
}

And the test HTML:

<p class="test">Test paragraph without opacity.</p>
<p class="test opaque1">Test paragraph with <code>opacity</code></p>
<p class="test opaque2">Test paragraph with <code>filter</code></p>
<p class="test opaque3">Test paragraph with <code>-ms-filter</code></p>
<p class="test opaque4">Test paragraph with compatibility note</p>

<p>
  <a class="test" href="#">Test anchor without opacity.</a><br/>
  <a class="test opaque1" href="#">Test anchor with <code>opacity</code></a><br/>
  <a class="test opaque2" href="#">Test anchor with <code>filter</code></a><br/>
  <a class="test opaque3" href="#">Test anchor with <code>-ms-filter</code></a><br/>
  <a class="test opaque4" href="#">Test anchor with compatibility note</a><br/>
</p>

In IE8, the opaque2, opaque3, and opaque4 paragraphs are transparent, but none of the anchors are. In IE6, the opaque2 and opaque4 paragraph and anchor both have transpareny.

Answer 1

Try giving the anchor display:block, but then you will have to fix its css properties like the width, height .... etc. But once you give the anchor the property display:block the opacity will work fine.

According to the comments, you may have luck with display: inline-block;zoom:1 - The inline-block works on IE8, the zoom will target IE 6/7.