0

InternetExplorer8の[キャンセル]ボタンにカーソルを合わせてみてください。

http://jsfiddle.net/HYDKa/

初めてカーソルを合わせるとジャンプして[OK]ボタンが表示されますが、その後は自動的に修正されます。ただし、後続のホバーは正常に機能します。

このバグは[OK]ボタンでも発生することに注意してください。[キャンセル]ボタンを使用すると、さらにわかりやすくなります。また、このバグはIE 6および7に存在しますが、イメージがBase64でエンコードされているため、提供したデモは機能しません。

もちろん、このコードはIE以外のブラウザーでも正常に機能します。

これはjQueryのバグですか？画像を分割する以外に、これを回避するためにできることはありますか？IE <9のスタイルシートを含めることもできますが、必要がない場合は含めたくありません。

ありがとう！

4

2 に答える 2

0

これを読んだ後、「backgroundPosition」を「background-position-x」に変更することで問題を解決することができました。また、一部のブラウザは「background-position-x」をサポートしていないため、同じことを行うCSS3トランジションを作成し、JavaScriptコードをifステートメントでラップして、ブラウザがCSS3トランジションをサポートしていない場合にのみ実行されるようにしました。 。私は自分のWebサイトの他の場所で機能検出を使用していませんでした。また、このような単純なことでModernizrに煩わされたくなかったので、ここに示す機能を使用しました。もう1つ注意しなければならないのは、「sliding_link_original_background_position」変数をまったく気にする必要がなかったことです。

barlasapaydinの時間だけでなく、これを読んだ他の人の時間にも感謝します。ありがとうございました！

于 2012-07-17T16:22:46.427 に答える
0

古いInternetExplorerバージョンは、「px」のないCSS値を受け入れません。例=幅：10px;

したがって、アニメーション値の最後に+'px'を追加する必要があります。

これがjsfiddleの動作です

    $(this).find('.sliding_link_image').animate({
        'backgroundPosition': (sliding_link_original_background_position + 10) + 'px'//<--here
    }, 150);
}, function() {
    $(this).find('.sliding_link_image').animate({
        'backgroundPosition': sliding_link_original_background_position + 'px'//<--and here
    }, 150);
于 2012-07-07T02:22:16.773 に答える