IE6の対策まとめ

もうIE6は過去の遺物…と思っていたのですが、
役所などはまだ使っているようで驚きました。
サポート切れてるのに…。
出先で簡単に確認できるよう、まとめておきます。

IE6だけに適用

IE6、IE7だけに適用する要素は、
連続して指定するとおかしくなることがあるので、
１つずつ記述した方が無難です。（特にIE6の指定）

ついでにIE7・IE8だけの書き方も。

IE7だけに適用

IE8だけに適用

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

IEはフロートのマージンが2倍になるため、
幅が想定を超え、落下する。
このため、フロート要素には必ず以下を記述すること。
display: inline;
overflow: hidden;
dd要素もdisplay: inline;する必要がある。

背景色が出ない時

height:1%;を設定すると直ることがある。

IE6でmargin-bottomが極端に増えるとき

height: 1%;を指定すると直ることが多い。

背景画像がIE6・7では、1pxずれる

背景画像の縦・横の長さが奇数の時に起こる。
偶数値にすると直ることがある。
padding-left:1px;　とすることで修正されるが
なるべく偶数値で対応すること。

IE6でのmin-heightの対応

IE6では、min-heightが使えないが、以下の方法で可能になる

height: auto∼を先に書くことで、次の行の設定が適用されるようになる

IE8をIE7モードで動かす

z-indexの扱い方

IEとFireFoxでは、z-indexの扱い方が異なる。
IEではdiv要素が並んでいると勝手に最後の要素を上に配置する。
例）最初にメニューバーがあり、その下にアニメーション要素を置いた場合。
メニューがドロップダウンする形式だと、IEではアニメーション要素の下に
隠れて見えない。

・回避策①　要素全体にz-indexで順序を指定する
・回避策②　下の要素がFLASHの場合は、下記のパラメータを追加する必要がある。

条件付きコメント一覧

線が表示されない

・position: relative;を指定する
・TR要素に指定している場合、IE6と7は、無効になる場合がある。
　内部のTHやTDに、個別に指定する必要がある。
　厳密なデザインを行う場合は、表を使わない。DIVとリストの方が緻密。

IEで指定どおりのfont-sizeにならない

11px以下のフォントが指定より大きくなる現象。
font-family で最初に日本語フォントを指定することで解決する。
↓
font-family: ‘ＭＳ Ｐゴシック’, sans-serif;

IEで要素内をインデント処理した時、インライン要素のすべてに適用される

ボックス内にPタグで説明文を記述し、単語の一部をspanタグで囲んで
何らかの強調表示を行うような場合、要素内のPにインデント処理を施すと、
内部のspanタグにインデントがかかる。
→　spanタグのインデントを0にすることで解決

IEでH要素の上部がかけたように表示される

→　line-heightを指定(100%より大きく)することで解決

フロート内の要素が複製されて表示される

その要素に以下を設定
_margin-right: -3px;
もしくは
/margin-right: -3px;
それでもダメなら、
_display: inline;
_overflow: hidden;

まとめていると、つくづく腹が立ってきます。
生産性の低いブラウザです。