Question

我遇到以下链接的问题：

enter image description here

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

当我将鼠标悬停在同位素水文图像上时，如上图所示，一切正常（链接和css精灵）。 问题出在IE9中，当光标悬停在css精灵（播放按钮）上时，精灵会回到非悬停状态，你无法从内部点击链接（见下图）。

如果有人知道为什么会发生这种情况会很棒。这是我为它制作的jsfiddle，但它没有重现问题。

enter image description here

我有以下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;
}

Answer 1

我猜这是由于您的文档的DOCTYPE问题导致IE9以怪癖模式呈现文档。这可以解释为什么JSFiddle没有重现问题。尝试在IE9中打开开发者控制台，确保文档模式和浏览器模式都设置为IE9。如果这样可以解决您的问题，请确保您的DOCTYPE标记设置为HTML 5，例如

<!DOCTYPE html>

text-indent：-9999em不适用于IE9中的span元素

1 个答案: