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

【问题标题】：Mouse over effect is not working in IE鼠标悬停效果在 IE 中不起作用
【发布时间】：2011-07-29 16:29:49
【问题描述】：

我的代码：

<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 下运行不正常。我该如何解决这个问题？

【问题讨论】：

标签： internet-explorer internet-explorer-8 cross-browser

【解决方案1】：

如果您处于标准模式，这将在 IE8 中工作。

如果你在Quirks Mode，它将无法工作：

:hover 不适用于 IE6 和 IE7/8 Quirks Mode 中的非 a 元素。

您使用表格进行布局这一事实向我表明，在所有可能的原因中，处于 Quirks 模式就是答案。

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

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

简而言之，您需要确保将正确的文档类型作为 HTML 的第一行，例如：

<!DOCTYPE html>

您可以通过在 IE 中打开相关页面并按 F12 打开开发人员工具来验证我所说的内容。如果在“文档模式”中显示 Quirks Mode，那么您的 CSS sn-p 将永远无法工作。添加 doctype 后，它应该会显示“IE8 Standards”，它应该可以正常工作。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您在哪个版本的 IE 上进行测试？

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

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

【讨论】：

【解决方案4】：

为我工作。我在 Chrome、IE 8 和 9 中尝试过：

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

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

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

但确实如此——尝试将所有宽度和高度、边框属性移到 CSS 中——这是它们所属的地方。

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

【讨论】：

【解决方案5】：

看看这个：

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

我认为它会起作用。谢谢

【讨论】：