IE8不透明度/过滤器css样式不起作用(IE8 opacity/filter css style not working)

我有以下风格：

.LinkActionButtonDisabled

{

cursor: default;

color: inherit;

filter: alpha(opacity=40);

opacity: 0.4;

}

这适用于FF和chrome以及IE10向上，但在IE8和9中filter: alpha(opacity=40); 似乎没有应用。 样式的其他部分仍然有效，例如，光标默认为普通的curosr，而不是在悬停时转入链接指针光标。 有没有人有像这样的任何ie8不透明度问题？

I have the following style:

.LinkActionButtonDisabled

{

cursor: default;

color: inherit;

filter: alpha(opacity=40);

opacity: 0.4;

}

this works in FF and chrome and IE10 upwards, but in IE8 and 9 the filter: alpha(opacity=40); doesn't seem to be applied. The other parts of the style are still in effect, for example the cursor defaults to the normal curosr rather than turning in to the link pointer cursor when hovering over. does anyone have any ie8 opacity issues like this?

原文：https://stackoverflow.com/questions/20883376

更新时间：2021-04-03 17:04

最满意答案

正如您在评论中提到的那样，您的网站是针对怪癖模式构建的。 我假设有问题的元素没有have layout 。

要使opacity和filter (以及许多其他)工作，您的站点需要以标准模式呈现。

查看Spudley关于切换到标准模式的评论：

从怪异模式切换到标准模式：比你想象的更容易。 尝试将* {box-sizing:border-box;}到CSS的顶部，将到HTML的顶部。 Voila：标准模式，但有怪癖模式布局。 - 斯普利

As you've mentioned in the comments, your site is build for quirks mode. I assume the elements in question don't have layout.

To get opacity and filter (and many others) to work, your site needs to render in standards mode.

Check out Spudley's comment about switching to standards mode:

Switching from quirks mode to standards mode: easier than you'd think. Try adding * {box-sizing:border-box;} to the top of your CSS and to the top of your HTML. Voila: standards mode, but with quirks mode layout. – Spudley

相关问答

如果hasLayout属性设置为true，MS筛选器只能在IE7中工作，但它们只能在IE8的块元素上工作，或者如果将display属性设置为block或inline-block ..因为您试图在内联元素，a，然后设置display: inline-block; 应该为所有IE浏览器解决它，因为它可以为IE7设置hasLayout并保持IE8的快乐 .shareActionLink {

display: inline-block; /* IE needs but shouldn't hurt

...

不透明度对IE 10,9,8中的伪对象不起作用 试试这段代码： HTML:

CSS: div{

width:100px;

height: 100px;

background: blue;

filter:alpha(opacity=30);

-moz-opacity:0.3;

-khtml-opacity: 0.3;

opacity: 0.3;

}

div:after{

content: ' ';

position: abso

...

不知道如果这仍然适用于8，但是从历史上来看，IE不会对不具有布局的元素应用多种样式。 见： http : //www.satzansatz.de/cssd/onhavinglayout.html No idea if this still applies to 8, but historically IE doesn't apply several styles to elements that don't "have layout." see: http://www.satzansatz.de/

...

这是不透明度的所有css代码： .classname {

/* IE 8 */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

/* IE 5-7 */

filter: alpha(opacity=80);

/* Netscape */

-moz-opacity: 0.8;

/* Safari 1.x */

-khtml-opacity: 0.8;

/* Good br

...

实际上，当您将transition应用于多条规则时，您几乎可以同时获得n个 “结束”日志; 在你的情况下 - 动画开始后2秒(其中n是应用transition的规则的数量)。 发生这种情况是因为不同css规则的转换被认为是不同的转换事件。 之所以在第一次“开始”日志之后稍微获得“第二次”“结束”日志，是因为它实际上对应于第一个动画，但事件处理程序使用闭包中的变量值，因此它在那里输出2而不是1 。 为了避免这种情况，您可以使用setTimeout和动画持续时间( 2 s或2000 ms)再次触发重新

...

您可能想要在没有JavaScript的情况下查看如何在IE6-8中模拟CSS3框阴影。 。 我没有测试过，但值得一试。 filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),

progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),

progid:D

...

您不能强迫孩子的不透明度高于其父级。 在这种情况下，您可以设置部分透明的background-color或background-image以适应。 http://jsfiddle.net/Pq4LS/2/ .wrapper{

width:400px;

height:500px;

background-color: rgb(255, 0, 0); /* Oops, don't forget to set a fallback colour for older browser

...

正如本页所述： http： //www.quirksmode.org/css/opacity.html IE8(及以下)不支持不透明度，因此您必须使用Fabian提供的相当笨重的代码。 我认为更简单的选择是简单地做Madmartigan建议并使用jQuery的fadeTo()方法，因为它将迎合所有现代(而不是那么现代)的浏览器： $('.productImage').fadeTo(0, .25);

我还注意到一些可以在代码中改进的东西。 仅使用.class选择器比提供标记名称要慢，而jQuery

...

正如您在评论中提到的那样，您的网站是针对怪癖模式构建的。 我假设有问题的元素没有have layout 。 要使opacity和filter (以及许多其他)工作，您的站点需要以标准模式呈现。 查看Spudley关于切换到标准模式的评论： 从怪异模式切换到标准模式：比你想象的更容易。 尝试将* {box-sizing:border-box;}到CSS的顶部，将到HTML的顶部。 Voila：标准模式，但有怪癖模式布局。 - 斯普利 As you've mentione

...

其他过滤器处于活动状态时，所需的行为是什么？ 例如，当Customer单独处于活动状态(因此隐藏了其他节点)并双击客户时，是否要显示隐藏的邻居？ 看看这个小提琴： https ： //jsfiddle.net/g0dm4q3n/1/我修改了connectedNodes函数，以便在单击d时调整相邻节点的不透明度，并根据visible属性恢复其不透明度 - 设置通过其他过滤器。 这样，当只检查了两个复选框时，例如客户和电话，当您双击一个节点时，它会突出显示它的邻居(即使它们由于复选框而不可见)并再次双

...