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

Posted 2023-03-06

【中文标题】IE8 中的不透明度适用于 <p> 但不适用于 <a>

【英文标题】：Opacity in IE8 works on <p> but not on <a>

【发布时间】：2011-03-28 01:00:35

【问题描述】：

我在使用 IE8 时遇到问题，无法使 <a> 元素透明。我找到了这些相关的 SO 问题，但我对那里提供的答案没有任何运气：

Opacity CSS not working in IE8 Opacity in web pages?

我已尝试使用 zoom: 1; 来“giving layout”，但没有帮助。这是我的测试 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 段落是透明的，但没有一个锚是透明的。在 IE6 中，opaque2 和 opaque4 段落 和 锚点都具有透明度。

【问题讨论】：

+1... 很好的问题！快速提问...您在 IE7 上测试过吗？如果测试过，结果如何？

@Hristo：抱歉，我没有 IE7 环境。立即设置

那么，您是否尝试过在您采购的页面中使用 .opaque 中引用的 filter 和 -ms-filter？

@Bryan：你的意思是不是和我发布的源代码不同？

是的。阅读quirksmode.org/css/opacity.html 上的 IE 兼容性说明。我还没有时间测试它。

【参考方案1】：

尝试给锚点display:block，但是你必须修复它的css属性，比如宽度、高度……等等。 但是，一旦您将属性 display:block 赋予锚点，不透明度就会正常工作。

根据 cmets 的说法，display: inline-block;zoom:1 可能会很幸运 - 内联块适用于 IE8，缩放将针对 IE 6/7。

【讨论】：

谢谢...但是根本没有办法在 ie8 中使内联对象透明？块有一些问题，因为它不像文本那样工作。 （当然，它不应该这样做。）

使用block会出现什么样的问题？？是不是可以用 CSS 解决？

如果链接在文本块中，浏览器会希望将链接放在单独的行中。我可以浮动它，但是如果链接从行尾开始，则块仍会向下移动（块不会像内联元素那样跨文本行拆分）

你尝试过 inline-block 吗？我总是这样工作，而且对我来说效果很好......

你是对的。我在 IE6/7 中使用的 zoom:1 技巧与 display:inline-block 的效果相同。我以前从未注意到文本换行问题，因为我在标签云中使用不透明度，其中每个链接都是非常短的文本。您可以在此处查看文本换行问题：img689.imageshack.us/img689/3369/ieopacity.png（查看最后一个屏幕截图中半透明文本如何从新行开始？）