はじめてのIE6ハック

  • このエントリーをはてなブックマークに追加

IE6がひどいひどいとは聞いていたけど、そもそも手元のPCにIE6なんぞ入ってないし、使っている人も少ないんで今までまったく気にしていなかった。

しかし、手持ちの1台にIE6が入っていることに気づいた。非力なPCゆえか、一度IE7か8に上げたらアメブロへの投稿ができなくなり、元に戻したという経緯があった。

そのIEでクライアントのサイトを見たら、いろいろとおかしい。
見なければよかったのだが、一度見てしまったら気になる。直したい。

そこで、おかしい点を、ネットを調べつつ修正。

透過のPNG画像が透過になっていない

まず1つ目がこれ。
透過のPNG画像が透過になっていない。
それを解決するのが以下のCSSの記述。

つまり、画像をベタ置きしてるとダメってことですね。

floatしたボックス(divなど)のmarginの値が倍になっている

つづいて、2つ目。
サイドバーとメインコンテンツのレイアウトが崩れていて何事と思ったら、floatした時に、そのボックスのmarginが2倍になるというなんともな仕様、というかバグなわけですな。

いくつか解決方法はあるようだが、今回はこのCSSの記述方法を採用。

これは、プロパティの前に特殊記号などが記述されていた場合でも読み飛ばして通常と同じように解釈してくれる(というか、解釈してしまう)IE6のバグを利用して、IE6には
半分のmarginを指定すると。

なんてことないテクニックではあるけど、IE6ハックに触れてちょっと成長したような気分。


前後の記事

«  (前の記事)

(次の記事)  »
サブコンテンツ