我该如何解决IE的问题，即当鼠标没有悬停在图像上时边框不会显示
时间：2020-03-05 18:53:43 来源:igfitidea点击:
我正在尝试在一组图像上创建一个相当简单的效果。当图像上没有鼠标时，我希望它具有简单的灰色边框。当它上面确实有图像时，我希望它具有不同的"选定"边框。
以下CSS在Firefox中非常有效：
.myImage a img
{
border: 1px solid grey;
padding: 3px;
}
.myImage a:hover img
{
border: 3px solid blue;
padding: 1px;
}
但是，在IE中，当鼠标没有悬停在图像上时，边框不会出现。我的Google-fu告诉我IE中存在一个导致此问题的错误。不幸的是，我似乎找不到解决该错误的方法。
解决方案
回答
尝试使用其他颜色。我不确定IE是否理解"灰色"(而是使用"灰色")。
回答
IE在锚元素以外的任何其他东西上都存在：hover伪类的问题，因此我们需要更改悬浮影响锚自身的元素。因此，如果我们在锚点中添加了"图像"之类的类，并将标记更改为以下形式：
<div class="myImage"><a href="..." class="image"><img .../></a></div>
然后，我们可以将CSS更改为如下所示：
.myImage a.image
{
border: 1px solid grey;
padding: 3px;
}
.myImage a.image:hover
{
border: 3px solid blue;
padding: 1px;
}
通过将边框放置在锚点而不是图像上，可以模拟出所需的效果。请注意，CSS中可能需要类似以下内容的图片，以消除图像的默认边框：
.myImage a img {
border: none;
}
回答
以下在IE7，IE6和FF3中起作用。关键是使用a：link：hover。 IE6将A元素变成了block元素，这就是为什么我添加float内容以收缩包装内容的原因。
请注意，它处于"标准"模式。不知道在怪癖模式下会发生什么。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
.myImage a
{
float: left;
clear: both;
border: 0;
margin: 3px;
padding: 1px;
}
.myImage a:link:hover
{
float: left;
clear: both;
border: 3px solid blue;
padding: 1px;
margin: 0;
display:block;
}
</style>
</head>
<body>
<div class="myImage"><a href="#"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></a></div>
<div class="myImage"><a href="#"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></a></div>
</body>
</html>
回答
尝试使用背景而非边框。
它不一样，但是可以在IE中使用(请看一下我网站上的菜单：www.monex-finance.net)。
回答
以我的经验，IE无法与伪类一起很好地工作。我认为处理此问题的最通用方法是使用Javascript将CSS类应用于该元素。
CSS：
.standard_border
{
border: 1px solid grey;
padding: 3px;
}
.hover_border
{
border: 3px solid blue;
padding: 1px;
}
内联Javascript：
<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />
回答
<!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]-->
把它放在标题中，应该修复一些IE错误。
