CSS 不透明度在 IE7 或 IE8 中不起作用，即使触发了 hasLayout
我有这张幻灯片，鼠标悬停时会弹出一个叠加层，您可以此处查看。只需将鼠标悬停在“精选”部分下方的任何图片上即可。在 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;
}
I have this slideshow with a overlay that pops up on hover, you can view it here. Just hover over any pictures below the 'featured' section. Works great in FF, Webkit, IE9. I made a separate stylesheet for less than IE9 and in it I have declared width, height, zoom, positioning, used all the filters that work in IE.... and I'm not getting opacity in either IE7 or IE8. The div with class overlay is appended with JQuery, is this a problem? Here is my 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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的淡入淡出例程正在添加一个内联样式，该样式会导致
progid:DXImageTransform.Microsoft.Alpha(Opacity=60)覆盖您的过滤器：progid:DXImageTransform.Microsoft.Alpha(Opacity=65) )在你的CSS中。淡入淡出例程通常会放置内联样式，但您需要确保它要么在您想要的位置结束（不透明度为 65%），要么在淡入淡出后消失，以便使用 css（在 Firefox 中）它似乎随着内联而褪色，然后在完成后删除内联，以便拾取样式表不透明度）。编辑（从有关 jquery 淡入淡出的评论中添加信息）：如果您使用
.fadeIn()，请尝试使用.fadeTo(400, 0.65)（参见 http://api.jquery.com/fadeTo)，400 是默认持续时间.fadeIn()，因此您可以更改它，第二个数字是最终的不透明度设置Your fading routine is adding an inline style that results in
progid:DXImageTransform.Microsoft.Alpha(Opacity=60)which is overriding yourfilter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65)in your css. It is typical for a fade routine to put an inline style, but you need to make sure that it either ends where you want it (with the 65% opacity) or it goes away after the fade so that the css is used (in Firefox it appears to be fading with an inline and then deleting the inline once done so that the style sheet opacity is picked up).Edit (added info from comment on fading with jquery): If you are using
.fadeIn()then try instead to use.fadeTo(400, 0.65)(see http://api.jquery.com/fadeTo), the 400 is the default duration for.fadeIn(), so you could change that, and the second number is the final opacity setting