不透明的 CSS 在 IE8中无法工作

我使用 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中修改透明度了。

有什么想法吗？

262448 次浏览
小开
最佳答案

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

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

小开

当我需要的时候，设置这些(完全像我写的那样)对我有帮助:

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

你需要首先为兼容标准的浏览器设置不透明度，然后是各种版本的 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]-->

如果你把这些怪癖分开，你的网站将会很好的验证。

小开

这是 IE8的答案

如果 alpha 在 IE8中工作，那么你必须使用位置属性来表示这个元素，比如

职位: 亲属或其他。

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

小开

显然 alpha 透明度只在 IE8的块级元素上有效。

小开

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

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

小开

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

小开

这个密码管用

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

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

小开

您还可以添加一个 polyfil，以便在 IE6-8中启用本地不透明性使用。

Https://github.com/bladesk/internet-explorer-opacity-polyfill

这是一个独立的 polyfil，不需要 jQuery 或其他库。有几个小的警告，它不操作在线样式和任何样式表，需要不透明多面体，他们必须坚持同源安全政策。

用法非常简单

<!--[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>
小开

CSS

我过去经常使用 CSS-技巧中的以下内容:

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

罗盘

然而，一个更好的解决方案是使用 不透明指南针混合，所有你需要做的就是 @include opacity(0.1);，它会为你处理任何跨浏览器的问题。您可以找到一个示例 给你。


提交答案