开发者

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

I have a problem with IE8 where I cannot make <a开发者_如何学Go> 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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜