我使用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。
有任何想法吗?
不知道如果这仍然适用于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标准,所以如果你想你的网页来验证,通过使用IE浏览器,如果声明像下面从您的IE浏览器的样式表分离的标准样式表:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="http://www.mysite.com/css/ie.css" />
<![endif]-->
如果分开即怪癖,你的网站将验证就好了。
显然alpha透明度仅适用于在IE 8.设置显示块级元素:块。
使用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;
}
罗盘
然而,一个更好的解决方案是使用不透明指南针混入 ,所有你需要做的就是@include opacity(0.1);
它会照顾任何跨浏览器的问题你。 你可以找到一个例子在这里 。
这里是IE 8的答案
和它的作品为阿尔法在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>