IE8中的不透明度适用于< p>但不在< a> [英] Opacity in IE8 works on <p> but not on <a>

问题描述

我有一个问题，在IE8，我不能使< a> 元素透明。我发现这些相关的问题，但我没有运气与提供的答案：

• Opacity CSS在IE8中无法使用


• 网页中的不透明度？

我尝试过「提供布局」，使用 zoom：1; ，但它没有帮助。这是我的测试CSS，从此页面的示例中解除：

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

测试HTML：

 < p class =test>测试没有不透明度的段落。< / p& 
< p class =test opaque1>使用< code> opacity< / code>< / p> 
< p class =test opaque2>使用< code>过滤器< / code>测试段< / p> 
< p class =test opaque3>测试段落为< code> -ms-filter< / code>< / p> 
< p class =test opaque4>测试段带兼容性说明< / p> 
 
< p> 
< a class =testhref =＃>测试没有不透明度的锚点。< / a>< br / 
< a class =test opaque1href =＃>使用< code> opacity< / code>测试锚< / a>< br / 
< a class =test opaque2href =＃>使用< code>过滤器< / code>测试锚< / a>< br / 
< a class =test opaque3href =＃>测试锚< code> -ms-filter< / code>< / a>< br / 
< a class =test opaque4href =＃>测试具有兼容性说明< / a>< br /> 
< / p> 
  

在IE8中， opaque2 ， opaque3 和 opaque4 段落是透明的，但没有锚点。在IE6中， opaque2 和 opaque4 段落和 anchor都有transpareny。

解决方案

尝试给予锚点 display：block 它的css属性像宽度，高度....等
但是一旦你给锚点属性 display：block opacity将工作正常。 p>

根据评论，你可能有运气 display：inline-block; zoom：1 - inline-block在IE8上工作，缩放将瞄准IE 6/7。

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.

解决方案

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.

这篇关于IE8中的不透明度适用于< p>但不在< a>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！