以前に紹介したiepngfixだけど、IE6以下のみ対象のタグの中に<a>タグを入れてもリンクしないっぽい。
(タグはあるけど、クリックできない感じ)
例)<h1 class=”iepngfix”><a href=”hoge.html”>hoge</a></h1>
なのでpng背景に使う場合は、 <a>タグをネストさせないほうが吉かも。
例)
<div id=”header”>
<div class=”bgimg iepngfix”></div>
<h1><a href=”hoge.html”>hoge</a></h1>
</div>
空タグが入っちゃうのは、この際はやむを得ないのかなと。
あとはheaderをposition:relativeにして、. bgimgとh1をposition:absoluteにするなどで位置調整。
これでOKかと。
IE6でも透過PNGを表示可能にするiepngfixを使ってみました。
紹介されてたサイトはこちら。
結果としては かなりカンタンに使えることが判明。
これだけで透過PNGが使えるのは便利だし、HTML上に直接配置した画像だけでなくCSSで背景に張り込んだ場合にも適用できる点がすごい。
ただ問題は 他のpngfix系のテクニックと同じでJavaScriptをオフにされると、とても素敵な世界が広がってしまうこと。
他にもAJAXが動いてて処理の重いページの場合、動作せずにpingfixが適用されない場合があることの２点。
こればっかりは仕方ないのかもしれないけど、使うには勇気のいる選択になりそう。
自分のサイトとか、趣味で使う分にはかなりアリかと。
フロートとか、位置指定すると親ボックスがコンテンツ量に付随しなくなるんで、そんなときにこれ使うと便利です。
.clearfix{
}
.clearfix:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
display:inline-table;
}
/* Hide from IE-mac\*/
*html .clearfix{height:1%;}
.clearfix{display:block}
/* End hide IE-mac*/