この記事は 1 年 1 ヶ月 26 日 前に投稿されたものです。間違いに気づいたらその都度修正していますが、今読んだらおかしな点もあるかもしれません。ご了承ください。

好んでInternet Explorer 6を使っている人もいるので、やはり対策は必要かと思って。

というか、この記事はIE6で見ないと意味ないかも。

プロパティ名に「_」をつけてCSSで解決

p {
	background:#f00; /* 背景を赤に */
	_background:#0f0; /* IE6は背景を緑に */
}

ここは背景が赤ですが、IE6だけは緑になっているはずです。

CSSは上から読まれ、下にある記述が優先されるので、書く順序を逆にして

p {
	_background:#0f0; /* IE6は背景を緑に */
	background:#f00; /* 背景を赤に */
}

とすると

IE6も背景が赤くなってしまいます。

★他のやり方として、「IE6では!importantを指定しても、そのあとに書かれた同じスタイルが適用される」というバグを利用して

p {
	background:#f00 !important; /* 最優先で背景を赤に */
	background:#0f0; /* 背景を緑に */
}

とすれば

バグを利用してIE6だけが背景緑、他は赤

となりますが、むやみに「!important」は使いたくないので、「_」を付ける方が好きです。「_」の方が簡単だし（ただ、このバグは、後述する「min-height」で応用できます）。

★ちなみにIE6とIE7にハックをかけたい場合は、「_」ではなく「/」を付ければよい（「*」でもよい）、ということで、

p {
	background:#f00; /* 背景を赤に */
	/background:#0f0; /* IE6と7は背景を緑に */
}

とすると

IE6,7だけが背景緑で他は赤

となります。

<input>を<a>ではさんでも効かない

IE6に限らず、7,8もそうですが、

<a href="http://www.google.co.jp/" target="_blank">
	<input type="button" value="google">
</a>

はIEではクリックしても反応しません。その場合は「Onclick」(JavaScript)で解決。

<input type="button" value="google（同一ウィンドウ）" onClick="location.href='http://www.google.co.jp/'">
<input type="button" value="google（新規ウィンドウ）" onClick="window.open('http://www.google.co.jp/');">

★ちなみにこの書き方に慣れると「戻る」「閉じる」ボタンもつい作りたくなります。

<input type="button" value="戻る" onClick="history.back();">
<input type="button" value="閉じる（ので気を付けて）" onClick="window.close();">

IE6で<input type="button">の背景に画像を敷きたい場合の注意

・背景を「background-image」で指定して

・枠線を消すとき、「border」を「none」にする

とダメらしいです（下参照）。IE7も同様。

また、「button」を「submit」にしても同じ結果になりました。

またIEではcss、で

input[type="～"][name="～"][value="～"]

などと指定出来ないので、特定のボタンだけに背景画像を敷きたかったり、ボタンによって背景を使い分ける場合にはidかclassを与えなければならない。

（という面倒くささがあるので、IEは嫌いです（ー”ー#））

<div id="test20110328">
<style>
#test20110328 input {
	margin:0 5px 5px 0;
	width:83px;
	height:100px;
}
#test20110328 input.a {
	background-image:url(http://p.tl/LN1Q);
	border:0;
}
#test20110328 input.b {
	background-image:url(http://p.tl/LN1Q);
	border:none;
}
#test20110328 input.c {
	background:url(http://p.tl/LN1Q);
	border:0;
}
#test20110328 input.d {
	background:url(http://p.tl/LN1Q);
	border:none;
}
</style>

<input class="a" type="button">
<input class="b" type="button">
<input class="c" type="button">
<input class="d" type="button">
<br />
<input class="a" type="submit">
<input class="b" type="submit">
<input class="c" type="submit">
<input class="d" type="submit">
</div>

↑

１段目左から、

「background-image:～」「border:0」のbutton

「background-image:～」「border:none」のbutton

「background:～」「border:0」のbutton

「background:～」「border:none」のbutton

２段目左から、

「background-image:～」「border:0」のsubmit

「background-image:～」「border:none」のsubmit

「background:～」「border:0」のsubmit

「background:～」「border:none」のsubmit

文字数節約のために「background-image」より「background」、「none」より「0」と覚えておくと良いかも。

<select>がz-indexを無視するバグはjQueryのプラグインbgiframeで解決

書くのが面倒くさくなったので、こちらを参照してください。

↓

• IE6でselectタグ(プルダウン)がz-indexを無視する対策【CSS, HTML】 – Programming Magic
• IE6でSelectボックスだけz-indexが効かないバグをjQueryで解消する方法 – nzm_o。

ここまで書いて気づいたのですが、「min-height」について後述します、と上の方で書いたのを忘れていました。疲れたのでまた別の機会に書きたいと思います(^_^;

関連記事かも？

1. [html] formの部品とheight値について
2. JavaScript:inputの情報を取得する備忘録
3. アレをアレしたらアレがアレになるアレのアレのアレ
4. リキッド・レイアウト　３種
5. スタイルが一向に変わらず悩んでいたときに気づいたこと

関連記事は無いと思います。