0

我在我们的网站上使用nivo 滑块

它在所有设备上都运行良好，除了 XP 上的 IE8，由于臭名昭著的 IE 透明 png 问题，我在翻转时在 prev 和 next 按钮周围出现黑色边框。上一个和下一个按钮需要是透明的 png，因为它们有一个阴影并且放置在过渡图像的顶部。

箭 在此处输入图像描述

IE8 XP 中的问题 在此处输入图像描述

的HTML

<div class="nivo-directionNav">
    <a class="nivo-prevNav" style="display: none;"></a>
    <a class="nivo-nextNav" style="display: none;"></a>
</div>

CSS 

.nivo-directionNav a {
    position:absolute;
    z-index:9;
    cursor:pointer;
    }

/* the arrows are taken from a single sprite with a standard and active image
for prev and next with the background-position changed on rollover   */

.nivo-prevNav, .nivo-nextNav {
    width: 80px;
    height: 100%;
    }

.nivo-prevNav {
    left:0px;
    background: url("images/nivo_4_arrows.png") no-repeat 0 0;
    }


.nivo-prevNav:hover {
    background: url("images/nivo_4_arrows.png") no-repeat -80px 0;
    }

我试图实现这个javascript作为修复：

var i;
for (i in document.images) {
if (document.images[i].src) {
    var imgSrc = document.images[i].src;
    if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
        document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
    }
}
}

...以及在此论坛上的类似帖子中找到的此插件，但都没有证明是成功的。

在这方面浪费了很多时间，所以我真的很感谢任何可以解决问题的人！

4

2 回答 2

1

尝试将以下行插入“ nivo-slider.css ”（未指定主题的样式）：

.nivo-slice
{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)" !important;/* IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF) !important;/* IE6 & 7 */      
zoom: 1;
}

它适用于切片效果，但将其用于其他效果，但是在我的情况下，此解决方案将淡入淡出效果更改为简单的更改图片效果（不褪色）。也许它会帮助你。

于 2013-02-18T09:07:49.157 回答
0

此 javascript 脚本不适用于背景上的图像，仅适用于“img src”...

有两种解决方法：使用“img src”并将“position:absolute”放置在背景中。

或者

使用 if IE 而不是 background-image 使用：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='link-to-image');

继续为其他浏览器使用背景图像..

于 2012-07-12T20:13:02.090 回答