html - 画像リンクが IE では機能するのに、chrome では機能しないのはなぜですか?

Question

私は最近、このサイトを構築して FTP しました: (私の個人的なポートフォリオ サイト):

http://robert.young1.org

「最新の作品」セクションの下で、最初の 2 つのリンク (ファイン アート サイトとヤング アカデミー) は Chrome で正常に動作します。ただし、次の 2 つのリンクは、IE では機能しますが、Chrome ではまったく機能しません。

誰かがその理由について考えを持っていますか?

そのセクションの私のコードは次のとおりです。

<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;}

Answer 2

タグを閉じるのを何度も忘れてしまうと、エラーの原因になります。