0

私は私たちのサイトでnivoスライダーを使用しています

XP上のIE8を除いて、すべてのデバイスでうまく機能しています。これは、悪名高いIEの透明なpngの問題により、ロールオーバーの前のボタンと次のボタンの周りに黒い境界線が表示されます。前のボタンと次のボタンは、ドロップシャドウがあり、遷移する画像の上に配置されるため、透明なpngである必要があります。

矢 ここに画像の説明を入力してください

IE8XPの問題 ここに画像の説明を入力してください

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スクリプトは、背景の画像では機能せず、「imgsrc」のみで機能します。

解決するには2つの方法があります。「imgsrc」を使用して「position：absolute」を配置し、画像を背景に配置します。

また

if IEを作成し、background-imageの代わりに使用します。

filter：progid：DXImageTransform.Microsoft.AlphaImageLoader（enabled ='true'、sizingMethod ='crop'、src ='link-to-image'）;

他のブラウザにはbackgroung-imageを使い続けてください。

于 2012-07-12T20:13:02.090 に答える