1

我在使用以下链接时遇到问题：

在此处输入图像描述

播放图像是一个<span>带有背景图像的元素，与 css 精灵一起使用。

当我将鼠标悬停在上图中的同位素水文学图像上时，一切正常（链接和 css 精灵）。问题出在 IE9 中，当光标悬停在 css sprite（播放按钮）上时，sprite 会返回非悬停外观，您无法从内部单击链接（见下图）。

如果有人知道为什么会发生这种情况，那就太棒了。这是我为它制作的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 标签设置为 HTML 5，例如

<!DOCTYPE html>
于 2012-09-27T10:00:29.047 回答