即使触发了 hasLayout，CSS 不透明度也无法在 IE7 或 IE8 中工作

Posted 2023-03-06

【中文标题】即使触发了 hasLayout，CSS 不透明度也无法在 IE7 或 IE8 中工作

【英文标题】：CSS Opacity not working in IE7 or IE8 even with hasLayout triggered

【发布时间】：2012-02-02 19:26:42

【问题描述】：

我有这个幻灯片，悬停时会弹出一个叠加层，您可以查看它here。只需将鼠标悬停在“精选”部分下方的任何图片上即可。在 FF、Webkit、IE9 中运行良好。我为小于 IE9 制作了一个单独的样式表，并在其中声明了宽度、高度、缩放、定位，使用了在 IE 中工作的所有过滤器......而且我在 IE7 或 IE8 中都没有得到不透明度。带有类覆盖的 div 附加了 JQuery，这是一个问题吗？这是我的CSS：

.overlay 
background-color:#fff;
 filter:alpha(opacity=60);
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
 zoom:1;
 width:160px;
 height:20px;
 z-index:50;
 position:absolute;
 bottom:0;
 

【问题讨论】：

对我来说似乎在 Windows 上的 IE8 中运行良好。它在悬停时消失到 100%，然后在鼠标移出时消失到 0%？

你是如何测试 IE7/8 的？ IE9的浏览器模式？虚拟机？ IETest？

我在 Windows 上使用浏览器模式进行测试，@nav 它应该只有 60% 的不透明度。

【参考方案1】：

您的褪色例程正在添加一个内联样式，该样式会导致 progid:DXImageTransform.Microsoft.Alpha(Opacity=60) 覆盖您的 CSS 中的 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65)。淡入淡出例程通常会放置内联样式，但您需要确保它在您想要的位置结束（不透明度为 65%），或者在淡入淡出后消失以便使用 css（在 Firefox它似乎随着内联而消失，然后在完成后删除内联，以便拾取样式表的不透明度）。

编辑（添加关于使用 jquery 褪色的评论中的信息）：如果您使用的是.fadeIn()，请尝试改用.fadeTo(400, 0.65)（请参阅http://api.jquery.com/fadeTo），400 是.fadeIn() 的默认持续时间，所以您可以改变这一点，第二个数字是最终的不透明度设置

【讨论】：

嗯，好的。我正在使用 JQuery 进行淡入和淡出.....这对我来说是一个新领域。你不会碰巧知道该怎么做吧？

@Heather Walters--如果您使用的是.fadeIn()，请尝试使用.fadeTo(400, 0.65)（请参阅api.jquery.com/fadeTo），400 是.fadeIn() 的默认持续时间，因此您可以更改那个，第二个数字是最终的不透明度设置。

哇，这完全奏效了！您能否将此添加到您的答案中，以便我给您信用？

@Heather Walters--根据您的要求将我的评论添加到答案中。