主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

IEでz-indexの解釈違うのはわかったけど。

普通にやっていて、こんなケースになることは稀だれとおもいますが、ブログシステムとか、プログラムでソースを吐き出してくるところでタグとかを触れない場合は、仕方なくCSSでなんとかユーザビリティを高めようと思うわけです。

それで、ある画像と見出しリンクがあって、それはプログラムで吐き出されるので、ソースをいじれません。でも、見出しリンクだけクリックできるのは感覚的ではないので、画像もクリックさせたいと思って、その下に、リンクを追加して、それを無理矢理ブロック要素にして position: absolute; でかぶせてやって、クリックできるようにしたんですが、嫌な予感がしたので、IE7、8で確認してみたら、やっぱりクリックできない!

たぶん、a要素と画像がIEだけ逆にかぶってるんかなぁ、と思って、z-index: 1; と position: relative; を画像に対して追加してみたんですが、それでもダメでした。

あれれぇ、と思って、試しにa要素に背景色をつけてみたら、なんでかクリックできるようになったので、仕方なく background: transparent; を指定してやりすごそうと思ったのに、またクリックできない!

最終的に半透明フィルタのやつを透明にしてやりました。

なんかわけがわからなくなってしまった。

.entry-list {
position: relative;
padding: 1em 0;
}
.entry-list img {
float: left;
z-index: 1;
position: relative;
width: 400px;
height: 200px;
}
.entry-list a {
display: block;
z-index: 999;
position: absolute;
left: 0;
top: 1em;
width: 400px;
height: 200px;
background: #FFF;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity:0;
}
.entry-list a:hover {
background: #FFF;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
opacity:0.3;
}