Nivo Slider中的IE8透明PNG问题使用上一个和下一个按钮的背景图像

Question

我正在使用nivo slider

上的our site

它在除XP上的IE8之外的所有设备上都运行良好，由于臭名昭着的IE透明png问题，我在翻转时在prev和下一个按钮周围出现黑色边框。 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 + "')";
    }
}
}

...以及this plugin在此论坛上的类似帖子中找到，但都未证明是成功的。

浪费了很多时间，所以我真的很感激任何可以解决问题的人！

Answer 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;
}

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

Answer 2

此javascript脚本不适用于背景图片，只能使用“img src”...

有两种方法可以解决： 使用“img src”并输入“position：absolute”并将图像定位在背景中。

OR

使用if IE而不是背景图像：

滤波器：的progid：DXImageTransform.Microsoft.AlphaImageLoader（启用= '真'，sizingMethod = '作物'，SRC = '链接到图像'）;

继续将backgroung-image用于其他浏览器..