Question

我的代码：

<td width="70" height="60">
    <a href="images/Gallery1/6.jpg" rel="lightbox" title="my title" >
        <img src="images/Gallery1/thumbs/6.jpg"  width="65" height="40" border="0" class="gallery-img">
    </a>
</td>

和CSS：

.gallery-img{
    border:4px solid #FFFFFF;
}
.gallery-img:hover{
    border:4px solid #D4D5D8;
}

上面的代码使用Firefox运行正常，但在使用IE 8时却没有。我该如何解决这个问题？

Answer 1

如果你处于标准模式，这将在IE8中有效。

如果您在Quirks Mode：

，它将无效

:hover不适用于IE6中的非a元素，以及怪癖模式中的IE7 / 8 。

你使用表格进行布局的事实告诉我，在所有可能的原因中，处于怪癖模式就是答案。

阅读这篇冗长而详细的文章：

http://hsivonen.iki.fi/doctype/

简而言之，您需要确保HTML中包含正确的doctype，例如：

<!DOCTYPE html>

您可以通过在IE中打开相关页面来验证我所说的内容，然后按F12打开开发人员工具。如果对于“文档模式”它说Quirks模式，你的CSS片段永远不会工作。添加doctype后，它应该说“IE8标准”，它应该都可以工作。

如果它仍然不起作用，那么您还有一些其他问题阻止IE使用标准模式。

Answer 2

尝试从您的img HTML标记中删除border="0"。

Answer 3

您正在测试哪个版本的IE？

早期（版本6）版本的IE ONLY仅支持a（链接）元素上的悬停选择器，而不支持任何其他内容。较新的版本应该支持这一点，但我没有第一手经验来证明这一点。

以下是关于IE6的文章：http://www.howtocreate.co.uk/wrongWithIE/?chapter=%3Ahover

Answer 4

适合我。我在Chrome，IE 8和9中尝试过它：

http://jsfiddle.net/EmmrW/1/

即使使用了更新的代码，它仍然有效：

http://jsfiddle.net/EmmrW/2/

但确实如此 - 尝试将所有宽度和高度，边框属性移动到CSS中 - 这就是它们所属的位置。

另外，您可能有其他定义，任何IE特定的CSS文件或规则？检查那些。

Answer 5

检查出来：

a .gallery-img{
    border:4px solid #FFFFFF;
}
a:hover .gallery-img{
    border:4px solid #D4D5D8;
}

我认为它会起作用。感谢

鼠标悬停效果在IE中不起作用

5 个答案: