Nivo Slider 中的 IE8 透明 PNG 问题使用背景图像作为 Prev 和 Next 按钮答案

【问题标题】：IE8 Transparent PNG problems in Nivo Slider using background-image for Prev and Next ButtonsNivo Slider 中的 IE8 透明 PNG 问题使用背景图像作为 Prev 和 Next 按钮
【发布时间】：2012-07-06 09:05:47
【问题描述】：

我在our site 上使用nivo slider

它在所有设备上都运行良好，除了 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 + "')";
    }
}
}

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

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

【问题讨论】：

IE只是给链接加了边框吗？在箭头上设置边框：无，看看是否可以解决。
感谢您的建议 - 但它不是 CSS 边框。箭头图形是在 Photoshop 中创建的，带有阴影。应该是半透明的阴影的整个区域在 IE 上滚动显示为纯黑色。您可以在 Firefox / Chrome 上查看它，看看它在翻转时的样子。
您的站点链接转到滑块页面。你能解决这个问题吗？

标签： internet-explorer-8 png transparency nivo-slider

【解决方案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;
}

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

【讨论】：

【解决方案2】：

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

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

或

使用 if IE 代替背景图片：

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

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

【讨论】：

我认为IE条件语句将是我最好的选择。但是 - 背景图像是使用 NIVO 滑块中的以下 javascript 动态创建的：slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat') ;知道如何将 IE 条件语句应用于此代码吗？ -
打开 FIREFOX firebug 检查元素，右键单击元素（在 firebug 内部）并复制 css 路径，对每个图像执行此操作.. 然后..