0

JS:

DD_belatedPNG js

HTML:

<script type="text/javascript" src="js/fixpng.js"></script>

<a href="#" class="sbToggle"></a>

CSS:

.sbToggle{
    background: url(/img/select-icons-trans.png) 0 0 no-repeat;
    display: block;
    height: 27px;
    outline: none;    
    width: 31px;
}
.sbToggle:hover{
    background: url(/img/select-icons-trans.png) 0 -27px no-repeat;
}

上記のコードは IE6+ および FF で動作します。しかし、IE6 では、マウスがa.sbToggle:hover イベントをトリガーする要素に移動すると、背景画像(background-position:0 -27px)に 1 ピクセル シフトがあります (a要素のようにmargin-top:-1px)。

DD_belatedPNG.js の vmlOffsets メソッドと関係があると思います。誰も同じ問題を抱えていますか？

==============更新===============

DD_belatedPNG サイトで 1 ピクセル シフトに関する記述を見つけました) 

- the one pixel gap problem has been mostly solved. Few people noticed, 
but it bugged me, and was VERY hard to fix.[0.0.6a / 2008.12.14]
4

1 に答える 1

0

IE6 をサポートしている場合は、IE6 専用の CSS をターゲットにする方法 (条件付きコメントまたはその他の手段) をおそらく持っている (または完了するまでに持っているだろう) と思われます。その場合、最も簡単な解決策は、IE6 をターゲットにするために使用している手段を使用してから、IE6 の css を次のように変更することです。

.sbToggle:hover{
    background: url(/img/select-icons-trans.png) 1px -27px no-repeat;
}
于 2011-11-21T14:26:24.033 に答える