2

私の心をひねっているこの奇妙なIEの問題があります。他のブラウザ（Chrome / Firefox）では正しく動作します。

コードに直接飛び込みたい人のために、ここにフィドルがあります。重要な部分：

HTML：

<a href="#" class="btn">MyButton</a>

CSS：

.btn {
    display:block; width:135px; height:58px; text-indent: -9999px;
    background-image:url("http://i47.tinypic.com/e7f4w6.png");
}

.btn:hover { background-position:bottom; }

フィドルでは、画像の正しい「中心」を表示するための矢印を追加しました。ご覧のとおり、これはナビゲーション用の単純な画像スプライトです。画像の高さは実際のボタンの高さの2倍なので、を適用できますbackground-position:bottom。

しかし、何らかの理由で、ホバーすると、IEは画像を正しく表示しません。どういうわけか、矢印（黒い線）と中心線（ホバー状態の赤い線）が整列しなくなりました：

通常の状態： 通常の状態

ホバー状態： ホバー状態

行が「ジャンプ」するため、テキストもジャンプします（私の例ではほとんど目立ちませんが、私のプロジェクトではかなり良いと思います）。Win7のIE9以下でテストおよび発生します。

私はあなたがこの小さな頭の体操の解決策を持っているかもしれないことを願っています！

4

1 に答える 1

0

上記の jQuerybeast、Miguel-F、および Billy Moat からのコメントは、私を別の方向に向かわせ (ありがとう!)、別のマシンで Fiddle を開こうとしました。同じブラウザ、同じOSで、問題なく動作していました。

さらに調査した結果、画面の解像度やビデオ ディスプレイ、タスクバーが原因であることがわかりました。これは私のコードが正しいことを意味しますが、どういうわけか IE は画面上でいくつかのピクセルを間違って描画します (他のブラウザーはこれを正しく行います)。しかし、これはまったく新しい質問かもしれません。

もう一度、助けてくれてありがとう！

于 2012-11-21T15:09:56.547 に答える