IE6で透過PNGを背景にした場合にリンクが効かなくなる不都合

IE6でie7.jsを使った際、透過PNGを背景にするとリンクが効かなくなるという問題がありまして、その解決方法をご紹介いたします。方法はいたって簡単!透過PNGを背景にしている要素のa(アンカー)タグに、position:relativeを追加すると解決します。微妙に困る仕様ですが、それを差し引いても便利なie7は偉大です。!

タグ


IE6で透過PNGを表示する方法

すでに激しく既出ですが、現在最も簡単でお手軽である、ie7-jsを使用する方法をご紹介いたします。

1、まずは透過PNGを作成します。Fireworksで作成する場合、背景を何も無い状態(透明)にし、保存形式をPNG32として画像を保存します。

2、ここが肝心。Google コードのie7-jsをサイトに読み込みます。これは直接Googleから読み込んでくることになります。DLしてサーバに置くことも可能。下記ソースを<head></head>内に記述します。現在のバージョンは2.0(beta)なので、そのURLを。こちらはこまめに本サイトをみてバージョンアップのチェックが必要ですね。

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]-->

3、利用したい透過pngに xxx-trans.png という風に、名前の後ろに-trans.png をつけることで、その透過pngをIE6で使うようにすることができます。画像の名前がsample.pngであれば、sample-trans.pngといった感じの命名ルールとなります。

以上です。設置も非常にカンタンなので、今のところの一番のオススメでございます。

タグ


IE 6で泣かないための9つのCSSハック

http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack01/01.html
IE 6で泣かないための9つのCSSハック

おさらいの意味もこめて、参考になる記事を紹介します。

代表的なIE6のバグの解決策が纏められています。

このテクニックで100%対処できるわけではありませんが、それでもずいぶんマシにはなるはず。

まだ数年間は、IE6は普及しつづけるでしょうから、がっつりとこの手のテクニックはマスターしておくべきですね。

タグ


シンプルなソースでロールオーバーさせる方法(JavaScript使用)

ロールオーバーさせるには、色々な方法が存在しますが、個人的に一番使い勝手がいいと思ったものを紹介します。JavaScriptを使用したロールオーバーですが、これがまた大元のソースがシンプルになるのでイイカンジ。外部jsにでも入れておいて損はないとおもいます。

使い方は至って簡単。下記ソースを外部js化し、ロールオーバーさせたい画像の名前に_offを付加。ロールオーバー後の画像には_onを付加するだけです。

例)
ロールオーバー前の画像は
<img src=”sample_off.gif” />
ロールオーバー後の画像は
<img src=”sample_on.gif” />

これだけです。超お手軽!DreamWeaverのゴツイソースに嫌気がさしていた人は是非。下記サイト様で紹介されています。
ソース元:http://le-arche.jugem.jp/?eid=57

タグ


構造のマークアップなしでフロートをクリアする方法

前回も書きました、フロートをクリアする裏技(笑)、clearfix技ですが、もう一つ紹介しておきます。Tony Aslett氏が考え出した書き方とのこと。これは便利!是非お使い下さい(笑)

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

タグ


このページの先頭へ

イメージ画像