0

(この問題の前に、条件付きの IE ステートメントを使用して、これを IE ブラウザーから除外していましたが、IE10 ではサポートされなくなりました。)

そのため、サイトのヘッダーに 3 つの画像が重なり合っています。下のものは腕が動く .gif で、上のものは .gif と同じ画像ですが、腕がまったくなく、解像度が高くなっています (.gif は同様の画質をサポートできないため)。高解像度のピックと同じレイヤーに、腕だけの高解像度の画像があります。画像にカーソルを合わせると、腕のみの画像が消えて、腕が動いている.gifが表示されるようにcssを設定しました。

これは次の場所で表示できます: http://www.applocity.blogspot.com (Chrome または Firefox で表示した場合、正しく動作します。10 より前の IE で表示した場合、ホバー オーバー アニメーションなしで gif のみが表示されます。 IE10で表示すると、ソロアームが背景画像と正しく整列していないことが表示されます（アニメーションは機能しますが）

問題は次のコードにあると思います。

#chicken {
margin: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

#chicken:hover {
opacity:0;
}

これは Solo-arm の CSS コードで、Chrome と FF では width と height 100% 属性が正しく機能し、腕は背景に合わせて配置されますが、IE では何らかの理由で機能しません。

腕を画像に合わせるか、IE10で機能する方法を使用してIEでのみ削除するように誰かに教えてもらえますか?

4

1 に答える 1

2

以下のように追加text-align: centerすることで、問題を解決できるはずです。#chicken

#chicken {
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center; /* add this */
}

これを行う別の方法は、次のルールを追加することです。

#chicken a{
    display: block;
    text-align: center;
}
于 2013-06-04T00:45:49.677 に答える