リンクの上のテキスト なぜだかIEだけで効かなくなる問題
2016/09/21
こんにちは、ここ数年コーディングマシーンと化し、デザインとは距離を置いている（？）Webデザイナー黒岩です。
さて、IEは嫌われ者ですが、正直者でもあるんですよね。だって、閉じとかなかったら崩れる。。。
まじめな正直者なんです、ちょっとだけですけどね。
先日、一覧のコーディングをしていて、思わぬバグに遭遇しました。
よくある商品の一覧ページなんですけど、近頃html5とかも当たり前になってきて、SPとかはaタグだって、
平気でdivとか囲んじゃう時代になりました。。。特に一覧系でも、やっぱりPCとかで、たくさんのblock要素をaタグ一人に囲ませることに抵抗のある人も多いはず。
ということで、すでにご存じの方も多いかと思いますが、positionを使って、一覧の一つ一つにリンクをかぶせちゃう方法。
いえいえ、その方法を伝えたいわけではありませんよ！
ちなみに、下にサンプル作成してみました。本当は一覧なので、下のが10個ぐらい縦積みになると想定してください。
そして、一商品の紹介全体に一つのリンクが張られ、中のサムネイルやら、口コミやらにもそれぞれのリンクがはられています。
下記はサンプルなので、リンクはEBAのHPに遷移されるものですが、
実際は背景色は設定なし、今回はこのブログの背景がはいっていますので、あえて白をいれておきました。
ほげほげチョコレート
云々カンヌン
| サイズ | L | 300円 |
|---|---|---|
| サイズ | M | 200円 |
| サイズ | S | 100円 |
HTMLコードはこんな感じ。
<div class="wrap">
<h2 class="tit" background:none;>ほげほげチョコレート</h2>
<div class="content clearfix">
<div class="left"><a href="http://ebacorp.jp/EBAjigyou_naiyou.html"><img src="http://placehold.jp/150x150.png"></a></div>
<div class="right">
<div class="link"><a href="http://ebacorp.jp/">口コミが書かれています。たぶん題名でリンクしてる。</a></div>
<div class="desk">ここに商品の説明文がはいったりするいいしょうひんなのだよ云々カンヌン</div>
<table class="table">
<tr>
<th>サイズ</th><td>L</td><td>300円</td>
</tr>
<tr>
<th>サイズ</th><td>M</td><td>200円</td>
</tr>
<tr>
<th>サイズ</th><td>S</td><td>100円</td>
</tr>
</table>
<div class="staff">最後にスタッフが使用した感想がなんとなくかかれていたりする。</div>
</div>
</div>
<a class="wrap_link" href="http://riemitsu.net"></a>
</div>
それで、今回CSSはWPの投稿だったので、直書きしちゃいましたが、こんな感じ。
<style>
.wrap{
width: 600px;padding:10px;border:1px solid #ccc;font-size:12px;position: relative;
}
.wrap_link {
position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;text-decoration: none;
}
.clearfix::after {
content:"";
display: block;
clear: both;
}
.tit {
margin:10px 0;
}
.left,.right {
float: left;
}
.left {
width: 200px;
}
.left img {
position: relative;z-index: 2;
}
.right{
width:360px;
}
.link {
margin-bottom: 10px;z-index: 3;position: relative;text-decoration: underline;
}
.table {
border: 1px solid #ededed;padding: 10px;width: 100%;border-collapse: collapse;margin: 10px 0;
}
.table th, .table td {
border:1px solid #ededed;padding:5px;
}
</style>
これの何が問題だったのか？？？
実はIE9、10でなぜだかテキストの上だけリンクがきかなかったのです。
口コミのところとかテキストリンクは大丈夫なのですが、aタグを全体にかぶせているのに、見事に文字の上だけリンクが効かない。。
上記のサンプルが果たして再現できているのか、これにつきましては、私のPCは現在IE edge になってましてこのバグは解消されています。
もしよかったら、IE9とか10の方、見てみてください！
そして、このバグをどうやって解消したか！？
実はこのかぶせているaタグに透明の背景画像を設定してやると解消したのです！
ちなみに背景色でもよいのですが、なにせかぶせているのでコンテンツが・・・・
それなら、transparentでは？とも思ったのですが、残念ながらダメでした。。。。
そこで、一昔前よくみかけましたが、あの手法！
1px四方の透明画像pngとかで作成して、no-repeatで背景にいれてやると！・・・完璧です！！
そんな感じで、もし、こんな摩訶不思議でちょっと腹立たしいバグに遭遇した時には、お試しあれ！！