html - 为什么我的图像链接在 IE 中可以使用，但在 Chrome 中却无法使用？

Question

我最近构建并通过 Ftp 访问了此网站:(我的个人作品集网站):

http://robert.young1.org

在“最新作品”部分下，前两个链接(美术网站和青年学院)在 Chrome 中运行良好。然而，接下来的两个链接在 Chrome 中根本不起作用，尽管它们在 IE 中可以工作。

有人知道为什么吗？

该部分的代码如下:

<div class="latest_work">

    <h2>Latest Work</h2>

    <hr />


    <div class="grid_7">

        <h3>Fine Art site</h3>                  

        <a href="http://robert.young1.org/fineart.php"><img src="img/fine_art resized.png" width="317" height="200" class="grid_5"></a>

    </div>

    <div class="grid_7 omega" id="right">

        <h3>Young Academy site</h3>

        <a href="http://robert.young1.org/youngacademy.php"><img src="img/young_academy.png" width="317" height="200" class="grid_5"></a>

    </div>

    <div class="grid_7">

        <h3 class="grid_7">Pinner Walks site</h3>

        <a href="http://robert.young1.org/pinnerwalks.php"><img src="img/pinner_walks resized.png" width="317" height="200" class="grid_5"></a>

    </div>

    <div class="grid_7 omega" id="right">

        <h3>PSLK </h3>

        <a href="http://robert.young1.org/pslk.php"><img src="img/pslk resized.png" width="317" height="200" class="grid_5"></a>



    </div>
</div>

CSS:

    .latest_work {
    margin-top: 220px;
}






.latest_work h3 {
    margin-top: 20px;
}

.latest_work img {
    color: #999;
    border: 2px solid #bbb;
    background-color: #f0eeed;
    opacity: .9;
}

.latest_work img:hover {
    opacity: 1.0;
    color: #666;
    border: 2px solid #ddd;
}

谢谢

问候，

罗伯特

英国伦敦

Answer 1

这是因为如果没有任何样式，“其他元素”就会与链接重叠，如下所示:

显然，在样式方面，它仍然重叠，只是向下移动了一点。要解决此问题，您可以这样做:

.grid_7{position:relative;z-index:999;}