【问题标题】：Opacity CSS not working in IE8不透明 CSS 在 IE8 中不起作用
【发布时间】：2010-12-29 05:21:45
【问题描述】：

我正在使用 CSS 来指示 jQuery 向下滑动部分的触发文本：即，当您将鼠标悬停在触发文本上时，光标会变为指针，并且触发文本的不透明度会降低以指示文本具有点击操作。

这在 Firefox 和 Chrome 中运行良好，但在 IE8 中不透明度不会改变。

我尝试了各种 CSS 设置都没有成功。

例如

HTML：

<h3 class="slidedownTrigger">This is the trigger text</h3>

CSS：

.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

是什么阻止了 IE 改变不透明度？注意：我已经在各种不同的元素上进行了尝试，交换了 CSS 语句的顺序，并且只使用了 IE 语句。我也试过使用

-ms-filter: "alpha(opacity=75)";

但没有成功。

我已经用完了所有东西来尝试在 IE8 中进行不透明度修改。

有什么想法吗？

【问题讨论】：

我认为这个相关/重复的问题有你的答案。 stackoverflow.com/questions/859000/opacity-in-web-pages
我看到了这个问题 - 麻烦就是答案：

  过滤器：阿尔法（不透明度= 50）； /* Internet Explorer /
  不透明度：0.5； / fx、safari、opera、chrome */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /*IE8*/

对我不起作用（我只是再次尝试仔细检查）。我将它应用于黑色和粗体的 h3。在 Firefox 和 Chrome 中，不透明度设置将标题变为灰色，正如您所期望的，但在 IE8 中它保持黑色。
哎呀 - 没有意识到你不会在 cmets 中使用 HTML - 但我想你可以明白我想说什么
如果您在纯色 div 上尝试这些样式，它们是否有效？也许还有其他一些 CSS 发生冲突。
不错的一个。是的 - 当我做一个简单的 div 时，给它一个高度和宽度以及一个红色的背景颜色，使用这些不透明度设置，它可以在 IE8 中工作。它是半透明的。我正在努力寻找问题所在。我没有修改样式表中其他任何内容的不透明度，所以我想不出有什么可能与它仅在 IE 上发生冲突。

标签： css internet-explorer-8 opacity

【解决方案1】：

不知道这是否仍然适用于 8，但历史上 IE 不会将几种样式应用于没有“布局”的元素。

见：http://www.satzansatz.de/cssd/onhavinglayout.html

【讨论】：

IE 不会对没有“布局”的元素应用多种样式。
太棒了！谢谢。这就是问题所在。我试图调整不透明度的元素（例如 h3）没有“布局”。一旦我给了他们一些，不透明度就起作用了。我所做的只是添加 width: 100%;到h3。感谢您为我指明正确的方向。但是，Internet Explorer 这样做似乎很疯狂（如果不是错误的话）。
IE 不会对很多元素应用很多样式。
@danwellman 然后它还做了很多其他“有趣”的事情。耶。
有趣的是，IE7 不需要“布局”。我在零高度和padding-bottom: 100% 的元素上使用响应式背景图像，并且在 IE8 中，直到我设置显式高度后，不透明度才生效。 IE7 不需要这个。

【解决方案2】：

设置这些（就像我写的一样）在我需要时为我服务：

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);

【讨论】：

谢谢，我相信“过滤器：alpha(opacity=70);”适用于 IE
只需按照您的描述设置“不透明度”和“过滤器”就足以让它在 FF4 和 IE8 中都适用。 -moz-opacity 不是必需的。
@Gabriel McAdams : filter: alpha(opacity=70);工作（但仅在 IE 8 中）
@Gabriel 这真是一种享受！我将在 IE 7/8 中不再有不透明问题！
更具体的信息：其实是fadeIn方法去掉透明度。

【解决方案3】：

您需要首先为符合标准的浏览器设置 Opacity，然后是各种版本的 IE。见例子：

但是这个不透明代码在 ie8 中不起作用

.slidedownTrigger
{
    cursor: pointer;
    opacity: .75; /* Standards Compliant Browsers */
    filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

请注意，我删除了 -moz，因为 Firefox 是符合标准的浏览器，并且不再需要该行。此外，-khtml 已被贬值，因此我也取消了该样式。

此外，IE 的过滤器不会根据 w3c 标准进行验证，因此如果您希望您的页面通过验证，请使用如下 if IE 语句将您的标准样式表与 IE 样式表分开：

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

如果你把 ie 的怪癖分开，你的网站就会很好地验证。

【讨论】：

只需按照您的描述设置“不透明度”和“过滤器”就足以让它在 FF4 和 IE8 中都适用。标记为“/*Next 2 lines IE8*/”的部分不是必需的。
@demoncodemonkey：正确。这完全取决于您安装的版本。如果您想要最大的兼容性，我建议所有这些。
正确，但是：“为了保证 Internet Explorer 7 和 8 的用户都能体验过滤器，您可以包含上面列出的两种语法。由于我们的解析器的特殊性，您需要包含在旧语法之前更新语法，以便过滤器在兼容性视图中正常工作（这是一个已知错误，将在 IE8 的最终版本中修复）。这是一个 CSS 样式表示例：“（来源：link )
@Kevin “如果你想要最大的兼容性，我建议所有这些”。那么，您不应该删除 -moz-opacity，对吧？
-ms-filter 不需要引号。

【解决方案4】：

这是 IE 8 的答案

如果 alpha 可以在 IE8 中工作，你必须为该元素使用位置属性，例如

位置：相对或其他。

http://www.codingforums.com/showthread.php?p=923730

【讨论】：

【解决方案5】：

显然 alpha 透明度仅适用于 IE 8 中的块级元素。设置显示：块。

【讨论】：

【解决方案6】：

在 IE8 上使用 display: inline-block; 可以解决此问题。

FWIW，opacity: 0.75 适用于所有符合标准的浏览器。

【讨论】：

【解决方案7】：

上面的答案都不适合我，所以我只是给我的 DIV 标签一个透明的背景图片，这对所有浏览器都非常有效。

【讨论】：

【解决方案8】：

此代码有效

filter: alpha(opacity = 50); zoom:1;

您需要添加缩放属性才能使其工作:)

【讨论】：

【解决方案9】：

您还可以添加一个 polyfil 以在 IE6-8 中启用本机不透明度。

https://github.com/bladeSk/internet-explorer-opacity-polyfill

这是一个独立的 polyfil，不需要 jQuery 或其他库。有几个小警告它不适用于内联样式，并且对于任何需要不透明 polyfil 的样式表，它们必须遵守同源安全策略。

使用非常简单

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>

【讨论】：

【解决方案10】：

CSS

我曾经使用CSS-Tricks的以下内容：

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

指南针

但是，更好的解决方案是使用Opacity Compass mixin，您只需使用@include opacity(0.1);，它会为您处理任何跨浏览器问题。你可以找到一个例子here。

【讨论】：