IE10以下でaタグにz-indexが効かない時の対処法

開発者はみんなみーーーーんな大好きIE（皮肉）。旧IE消えてくれ。
まあ、IE独自の仕様はたくさんあるけど、その中の１つを対処法こみで紹介

どんな時に起きるか

こんな時。

<div class="block_test">
    <p class="block_test_img"><img src="./images/block_test_img.png" alt=""></p>
    <p class="block_test_link"><a href="./test.html"></a></p>
</div>

.block_test {
    position: relative;
}
.block_test_img {
    position: relative;
    z-index:5
}
.block_test_link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100px;
    height: 100px;
    display: block
}
.block_test_link a {
    display: block;
    width: 100%;
    height: 100%;
}

デザインの都合上で、画像全体にリンクはかけたくない、クリッピングマスクも使いにくいって場面。
こういう時は空のAタグを設置することがあるけど、chrome、firefox、safari、ie11等は大丈夫なのにie10ではz-indexが効いてくれない。
よくあるミスとしてz-indexとセットでおく「position」プロパティが置いてなくて、とかでもない。

原因

原因は謎仕様の、「何も描写されていない空の要素にはz-indexが効かない」というもの。えぇ・・・。
要するに、空の要素に何かしらを中に入れるか、空の要素に対してbackgroudプロパティで背景にひくかしないとz-indexが効いてくれない。

対処法

一番シンプルな対処法は、backgroudで透明の1pxの画像をrepeatさせてひくこと。
これによって、透明が描写されていると認識されるため、ちゃんとz-indexが効いてくれる。
background: rgba(0,0,0,0)でもいいけど、これだとIE8が対応しないので、素直に1pxの透明画像にした方がいいかも。

では。