不透明CSS不工作在IE8

我正在使用CSS来指示jQuery下拉部分的触发器文本:即当您将鼠标hover在触发器文本上时,光标将变为一个指针,触发器文本的不透明度将减less,以指示文本具有单击操作。

这在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中获得不透明度修改。

有任何想法吗?

不知道这是否仍然适用于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的filter不会validationW3C的标准,所以如果你想让你的页面validation,使用如下IE语句将你的标准样式表从你的IE样式表中分离出来:

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

如果你分离即怪异,你的网站将validation一切正常。

显然alpha透明只对IE 8中的块级元素有效。设置display:block。

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

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

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

罗盘

但是,更好的解决scheme是使用不透明度罗盘混合 ,所有你需要做的是@include opacity(0.1); 它会为您处理任何跨浏览器问题。 你可以在这里find一个例子。

这里是IE 8的答案

和它的工作在alpha8的工作在IE8中,你必须使用位置的属性,像这样的元素

位置:相对或其他。

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

上面的答案都没有为我工作,所以我只是给我的DIV标签一个透明的背景图像,而不是所有的浏览器完美的工作。

此代码工作

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

你需要添加缩放属性为它工作:)

你也可以添加一个polyfil来在IE6-8中启用本地不透明的使用。

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

这是一个独立的polyfil,不需要jQuery或其他库。 有几个小注意事项,它没有在线样式和任何需要不透明polyfil'd的样式表,他们必须坚持同源安全策略。

用法很简单

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