1

次のリンクに問題があります。

ここに画像の説明を入力

play 画像は<span>、css スプライトで使用される背景画像を持つ要素です。

上の画像のように同位体水文学の画像にカーソルを合わせると、すべて正常に動作します (リンクと CSS スプライト)。問題は IE9 にあります。カーソルが css スプライト (再生ボタン) の上に置かれると、スプライトは非ホバーの外観に戻り、内部からリンクをクリックすることはできません (下の画像を参照)。

なぜこれが起こっているのか誰かが知っていれば、それは素晴らしいことです. これは私が作成したjsfiddleですが、問題は再現しません。

ここに画像の説明を入力

私は次のhtmlとcssを持っています:

html:

    <div id="video-box-left">
                            <div class="video-img">
                                <a href="#" onclick="window.open('http://wwwindex.html','photoessay','scrollbars=no,resizable=yes,width=850,height=722')">
                                <span class="video-play-q-left">play</span>
                                <img src="resources-na/images/forum.PNG" width="200" height="155" border="1"></a>
                            </div>
                            <div class="video-text">
                                <p><strong>Food for the Future</strong><a href="#" onclick="window.open('http://www-','photoessay','scrollbars=no,resizable=yes,width=850,height=722')"></a></p>
                            </div>
                        </div>

CSS:

#video-box-left{
    margin-left: 10px;
    margin-right: 20px;
    float: left;
    width: 210px;
}

.video-img {
    background-color: #EEEEEE;
    border: 1px solid #DDDDDD;
    margin-bottom: 5px;
    padding: 4px;
    width: 200px;
    height: 155px;
}

.video-text {

}

.video-play-q-left {
    background: url("../images/video-play-q-big.png") no-repeat scroll 0 0 transparent;
    background-position: center top;
    height: 50px;
    position: absolute;
    text-indent: -9999em;
    width: 50px;
    left: 100px; 
    top: 127px;
}

a:hover .video-play-q-left{
    background-position: center bottom;
}
4

1 に答える 1

0

これは、ドキュメントのDOCTYPEに問題があり、IE9がドキュメントをクァークズモードでレンダリングする原因になっていると思います。それは、JSFiddleが問題を再現しない理由を説明します。IE9で開発者コンソールを開いてみて、ドキュメントモードとブラウザモードの両方がIE9に設定されていることを確認してください。それで問題が解決する場合は、DOCTYPEタグがHTML5に設定されていることを確認してください。

<!DOCTYPE html>
于 2012-09-27T10:00:29.047 に答える