143

我正在使用 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 中进行不透明度修改。

有任何想法吗？

4

10 回答 10

158

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

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);
于 2009-12-22T18:16:44.120 回答
65

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

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

于 2009-12-22T18:15:33.380 回答
49

您需要首先为符合标准的浏览器设置 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 怪癖分开，您的网站将验证得很好。

于 2010-06-09T04:24:02.510 回答
17

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

于 2011-04-07T19:46:26.717 回答
17

使用display: inline-block;IE8 上的作品来解决这个问题。

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

于 2012-09-05T16:17:43.363 回答
6

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);它会为你处理任何跨浏览器的问题。你可以在这里找到一个例子。

于 2015-02-16T04:36:17.037 回答
2

这是 IE 8 的答案

并且它适用于 alpha 在 IE8 中工作，您必须为该元素使用位置属性，例如

位置：相对或其他。

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

于 2011-02-22T09:51:34.480 回答
2

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

于 2013-04-24T16:04:22.423 回答
1

此代码有效

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

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

于 2014-03-11T13:38:55.937 回答
1

您还可以添加一个 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>
于 2014-08-06T20:06:49.360 回答