css - IE8 中的不透明度适用于 <p> 但不适用于 <a>

标签 css internet-explorer-8 opacity

我在 IE8 上遇到问题,无法生成 <a>元素透明。我发现了这些相关的 SO 问题,但我没有找到那里提供的答案:

我试过“giving layout”,使用zoom: 1; ,但它没有帮助。这是我的测试 CSS,摘自 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);
}

和测试 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>

在 IE8 中,opaque2 , opaque3 , 和 opaque4段落是透明的,但没有一个 anchor 是透明的。在 IE6 中,opaque2opaque4段落 anchor 都具有透明度。

最佳答案

尝试给 anchor display:block,但是你必须修复它的 css 属性,比如宽度、高度......等等。 但是一旦你给 anchor 属性 display:block 不透明度就会正常工作。

根据评论,您可能会幸运地使用 display: inline-block;zoom:1 - 内联 block 适用于 IE8,缩放将针对 IE 6/7。

关于css - IE8 中的不透明度适用于 <p> 但不适用于 <a>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3452868/

相关文章:

html - 带有溢出滚动条的垂直响应面板

html - 如何叠加两张图像,但将其定位,使其看起来像一张?

html - 用图像替换 Font Awesome 图标

javascript - IE8 对象不支持该属性或方法

javascript - 如何在旧版 IE 中调度鼠标滚轮事件

javascript - 通过 javascript/jQuery 检测 IE 中的箭头键按下

jquery IE Fadein 和 Fadeout 不透明度

javascript - 无法让 jQuery 隐藏工作

悬停时 CSS + 不透明度变化 + 闪烁

javascript - 如何在不移动列表中其他元素的情况下使文本出现在 div 下?