不透明度 CSS 在 IE8 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1948176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Opacity CSS not working in IE8
提问by Gabriel McAdams
I'm using CSS to indicate the trigger text for a jQuery slide-down section: i.e. when you hover over the trigger text the cursor changes to a pointer and the opacity of the trigger text is reduced to indicate that the text has a click action.
我正在使用 CSS 来指示 jQuery 向下滑动部分的触发器文本：即，当您将鼠标悬停在触发器文本上时，光标会变为指针，并且触发器文本的不透明度会降低以指示文本具有单击操作.
This works fine in Firefox and Chrome, but in IE8 the opacity doesn't change.
这在 Firefox 和 Chrome 中工作正常，但在 IE8 中不透明度不会改变。
I've tried a variety of CSS settings without any success.
我尝试了各种 CSS 设置，但没有任何成功。
For example
例如
HTML:
HTML：
<h3 class="slidedownTrigger">This is the trigger text</h3>
CSS:
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;
}
What's stopping IE changing the opacity? Note: I've tried this on a variety of different elements, swapping round the order of the CSS statements, and just using the IE ones on their own. I've also tried using
什么阻止 IE 改变不透明度？注意：我已经在各种不同的元素上尝试了这个，交换了 CSS 语句的顺序，并且只使用了 IE 语句。我也试过使用
-ms-filter: "alpha(opacity=75)";
but with no success.
但没有成功。
I've run out of things to try to get opacity modification working in IE8.
我已经没有办法尝试在 IE8 中进行不透明度修改了。
Any ideas?
有任何想法吗？
采纳答案by Azeem.Butt
No idea if this still applies to 8, but historically IE doesn't apply several styles to elements that don't "have layout."
不知道这是否仍然适用于 8，但从历史上看，IE 不会将几种样式应用于没有“布局”的元素。
回答by Gabriel McAdams
Setting these (exactly like I have written) has served me when I needed it:
当我需要时，设置这些（就像我写的那样）对我有用：
-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);
回答by Kevin Florida
You need to set Opacity first for standards-compliant browsers, then the various versions of IE. See Example:
您需要首先为符合标准的浏览器设置 Opacity，然后是各种版本的 IE。参见示例：
but this opacity code not work in ie8
但是这个不透明度代码在 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);
}
Note that I eliminated -moz as Firefox is a Standards Compliant browser and that line is no longer necessary. Also, -khtml is depreciated, so I eliminated that style as well.
请注意，我取消了 -moz，因为 Firefox 是符合标准的浏览器，并且不再需要该行。此外，-khtml 已折旧，因此我也取消了该样式。
Furthermore, IE's filters will not validate to w3c standards, so if you want your page to validate, separate your standards stylesheet from your IE stylesheet by using an if IE statement like below:
此外，IE 的过滤器不会根据 w3c 标准进行验证，因此如果您希望您的页面进行验证，请使用如下的 if IE 语句将您的标准样式表与 IE 样式表分开：
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="http://www.mysite.com/css/ie.css" />
<![endif]-->
If you separate the ie quirks, your site will validate just fine.
如果您将 ie 怪癖分开，您的站点将被很好地验证。
回答by Bonnie V.
Apparently alpha transparency only works on block level elements in IE 8. Set display: block.
显然 alpha 透明度仅适用于 IE 8 中的块级元素。设置显示：块。
回答by crmpicco
Using display: inline-block;works on IE8 to resolve this problem.
使用display: inline-block;IE8 上的作品来解决这个问题。
FWIW, opacity: 0.75works on all standards-compliant browsers.
FWIW，opacity: 0.75适用于所有符合标准的浏览器。
回答by d4nyll
CSS
CSS
I used to use the following from CSS-Tricks:
我曾经使用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;
}
Compass
罗盘
However, a better solution is to use the Opacity Compass mixin, all you need to do is to @include opacity(0.1);and it will take care of any cross-browser issues for you. You can find an example here.
但是，更好的解决方案是使用Opacity Compass mixin，您需要做的就是@include opacity(0.1);，它会为您解决任何跨浏览器问题。您可以在此处找到示例。
回答by Darren Riches
None of the answers above worked for me, so I just gave my DIV tag a transparent background image instead, that worked perfectly for all browsers.
上面的答案都不适合我，所以我只是给了我的 DIV 标签一个透明的背景图像，这对所有浏览器都很有效。
回答by red
here is the answer for IE 8
这是 IE 8 的答案
AND IT WORKS for alpha to work in IE8 you have to use position atribute for that element like
并且它适用于 alpha 在 IE8 中工作，您必须为该元素使用位置属性，例如
position:relative or other.
职位：亲属或其他。
回答by mejiwara
This code works
此代码有效
filter: alpha(opacity = 50); zoom:1;
You need to add zoom property for it to work :)
您需要添加缩放属性才能工作:)
回答by Chris Marisic
You can also add a polyfil to enable native opacity usage in IE6-8.
您还可以添加 polyfil 以在 IE6-8 中启用本机不透明度使用。
https://github.com/bladeSk/internet-explorer-opacity-polyfill
https://github.com/bladeSk/internet-explorer-opacity-polyfill
This is a stand alone polyfil that does not require jQuery or other libraries. There are several small caveats it does not operate on in-line styles and for any style sheets that need opacity polyfil'd they must adhere to the same-origin security policy.
这是一个独立的 polyfil，不需要 jQuery 或其他库。有几个小警告，它不适用于内联样式，对于需要不透明 polyfil 的任何样式表，它们必须遵守同源安全策略。
Usage is dead simple
用法非常简单
<!--[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>
