IE7中的图片超链接不可点击答案

【问题标题】：Image hyperlinks in IE7 not clickableIE7中的图片超链接不可点击
【发布时间】：2012-12-18 17:10:24
【问题描述】：

以下网页中的图片链接到各自的页面。在 IE8 和 IE9 中运行良好，但在 IE7 中运行良好。在 IE7 中，当您将鼠标悬停在图像上时，链接 url 被识别（浏览器左下角的预览）但不可点击？

http://www.signport.co.uk/test/asg_ourwork.php

谁能告诉我是否有解决办法？

谢谢:)

【问题讨论】：

这是你的：
，你可以试试这个：
我把它改成了这个，但我失去了阴影效果。我不确定我是否正确地修改了代码？：
让我解释一下错误。在 IE7 的“a”中不能有 div + p + img。你必须像我说的那样，然后纠正阴影。您能否根据我的建议创建一个演示，以便我可以帮助您处理阴影？
我已根据您的建议修改了阿斯顿马丁的图片。该链接现在有效。如果我能找回阴影，那就太好了。 signport.co.uk/test/asg_ourwork.php
请将类名从“boxshadow”改为boxshadow2，可以吗？

标签： hyperlink internet-explorer-7

【解决方案1】：

问题是标签的混乱。

在 this example 中，您可以看到更正工作。在 chrome 中，它的工作原理和你的完全一样。在 IE7 中，链接工作如你所愿，你只需要更正翻转。

问题：

 <div style="opacity: 1;" class="item">
    <a href="http://www.signport.co.uk/test/asg_ask.php">
    <div class="boxshadow">
        <p>
            <img src="http://www.signport.co.uk/test/Images/thumb_ask.jpg" alt="ASK Italian" height="170" width="300">
        </p>
        </div>
      </a>
</div>

解决方案

HTML

    <div style="opacity: 1;" class="item">
    <a href="http://www.signport.co.uk/test/asg_ask.php">
        <span class="boxshadow"></span>
       <img src="http://www.signport.co.uk/test/Images/thumb_ask.jpg" alt="ASK Italian" height="170" width="300">
     </a>
</div>

CSS

.projects .item{box-shadow: 0 0 10px 0 black;padding:0;margin:10px;}
.projects a {display: block;height: 150px;margin-bottom: 20px;}
.projects a .boxshadow {position: absolute;z-index: 999999;box-shadow: none;}

【讨论】：

【解决方案2】：

这个解决方案是新的解决方案：

CSS

.item a{
   display:block;
   overflow:hidden;
   height:170px;
   -moz-box-shadow:0 0 10px black;
   -webkit-box-shadow:0 0 10px black;
   -o-box-shadow:0 0 10px black;
   -ms-box-shadow:0 0 10px black;
   box-shadow:0 0 10px black;
}

您可以删除不需要的 box-shadow SPAN。我做到了，所以你只需要添加这行代码。

【讨论】：

更正主页，试试吧，而不是 .item a 使用 .item > a