Geek Answers Handbook

Opacity in IE8 works on <p> but not on

I have a problem with IE8 where I cannot make the <a> elements transparent. I found these related SO questions, but I had no luck with the answers provided there:

I tried " layout rendering " using zoom: 1; , but it did not help. Here is my test CSS, taken 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 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 paragraphs opaque2 , opaque3 and opaque4 are transparent, but none of the anchors are. In IE6, the paragraph opaque2 and opaque4 and the anchor have transparency.

+4
source share
1 answer

Try to anchor display:block , but then you have to fix your css properties like width, height .... etc. But as soon as you give the display:block property a binding, the opacity will work fine.

According to the comments, you might be lucky with display: inline-block;zoom:1 - the built-in block works in IE8, the scale will target IE 6/7.

+6
source

More articles:


All Articles