category
サイト構築 -CSS

[CSS]IE6でよく遭遇する6つのバグとその解決方法

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。

IE CSS Bugs That’ll Get You Every Time

ボックスモデルのバグ

ボックスモデルのサンプル

上記の指定をした場合、IE6ではborderで囲まれた領域が「100px」となり、最新のブラウザでは「124px」となります。

解決方法

paddingを使用する場合には、ボックスに使用しないで、内包する要素に指定を行います。

マージンが二倍になってしまうバグ

上記の指定をした場合、IE6ではマージンが「40px」となり、最新のブラウザでは「20px」となります。

解決方法

「display:inline;」を付け加えるか、空白の指定に「margin」ではなく「padding」を使用します。

min-width, min-heihgtと同等の指定

IE6では、「min-width」「min-height」の指定は有効になりません。

解決方法

CSS Hackを使用して、指定します。

Stepdownバグ

Stepdownバグのキャプチャ

通常、フロートした要素は横並びになりますが、IE6で階段状になるバグがあります。

解決方法

「display:inline;」指定を行います。

hover擬似クラスをa要素以外にも対応

IE6ではhover擬似クラスはa要素にしか対応していません。最新のブラウザではa要素以外にも対応しています。

解決方法

Whatever:hoverの「csshover.htc」を使用すると、他の要素にもhover疑似クラスを利用することができます。

透過PNGを透過表示に対応

IE6では、透過PNG画像が、透過しないで表示されてしまいます。

解決方法は、The Different Techniques for Applying the PNG Hackでいくつか紹介されていますが、そのうち2つを紹介します。

HTCファイルを使用した解決方法

IE PNG Fix v1.0 RC4の「iepngfix.htc」を使用すると、IE6で透過PNGが利用できます。

JavaScriptを使用した解決方法

PNGHackの「pnghack.js」を使用すると、IE6で透過PNGが利用できます。
pnghack.jsの使用方法

Post on:2008年4月25日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

通りすがり
on 2008年4月25日

バグと仕様を混同していませんか?
相変わらず情報の転載しかしないのですね。

コリス
on 2008年4月25日

バグのものと未対応のものは、見出しで区別して記載しています。
PNGも表示自体は可能なので、バグでもいいかもしれません。

逆に聞きますが、あなたはバグを仕様と言う人ではないですか?

> 相変わらず情報の転載しかしないのですね。

クリップした情報を紹介するのが主目的なサイトなので。

ページの先頭へ




© coliss

RSS