a tagの中身がないとIEで動かない
もっともしょっぱいものの1つが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対応は大変。
Author And Source
この問題について(a tagの中身がないとIEで動かない), 我々は、より多くの情報をここで見つけました https://qiita.com/ya7gisa0/items/f087f13e27240a720055著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .