a tagの中身がないとIEで動かない

もっともしょっぱいものの１つがIE対応だと思う人も多いだろう。

キャンペーンサイトなどすぐにクローズしてしまうサイトなどは工数削減のために、テキストを画像で書き出してしまう場合があるだろう。

ここでその書き出したテキストの該当する文字だけにリンクを付けてほしいなどという要望が出たとする。

全く悲しいが無理矢理a tagを追加して、そのtagをposition:absoluteで該当箇所の上に重ねて、リンク機能を実装してしまうような場合も出てくるだろう。

該当a tagに

a {
    display:block;
    width: Apx;
    height: Bpx;
    position: absolute;
    top: x;
    left: y;
}

などcssを指定する。

しかしなぜかIEではcursorがpointerにならない。
IEではa tagに文字列が何もないと読み込まない仕様になっているからのようだ。

しかたなく

a {
    display:block;
    width: Apx;
    height: Bpx;
    position: absolute;
    top: x;
    left: y;
    background-color: #ffffff;
    opacity: 0;
}

などするとリンク先に飛ぶことができる。
しかしIE8ではopacityが使えない。

しょうがないので、透明な画像を背景に敷く。
画像を書き出さないといけないが、IE8だとbackground-sizeが使えないので小さい画像を用意してはいけない。

a {
    display:block;
    width: Apx;
    height: Bpx;
    position: absolute;
    top: x;
    left: y;
    background: url(path/transparent-image.png);
}

IE8対応は大変。