IE6で内容がコピーされて表示されるバグ

IE6のバグの中でも、「これはひどいな」と思うバグを紹介します。
このバグを初めて発見した時は、自分の目を疑いました。
書いた覚えのない文字が表示されていたんです。
「タイプミスでもしたかな?」と、ソースコードを見てみても間違っていない。
もちろん他のブラウザでは、きちんと表示されています。
表示されている文字をよく見てみると、どうもすぐ上に書いてある文字が表示されていました。
ソースコードは、以下のようなものです。

<div id="contents">
	<!--▼ボックス1ここから-->
	<div class="box">
		<p>
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。
		</p>
	</div>
	<!--▲ボックス1ここまで-->>

	<!--▼ボックス2ここから-->
	<div class="box">
		<p>
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。
		</p>
	</div>
	<!--▲ボックス2ここまで-->

	<!--▼ボックス3ここから-->
	<div class="box">
		<p>
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。
		</p>
	</div>
	<!--▲ボックス3ここまで-->
</div>
	

▼FireFoxやChromeなど
モダンブラウザの場合

▼IE6
IE6の場合

解決方法を色々探した結果、原因は『HTMLのコメント』でした・・・
このバグは『floatした要素を囲むようにコメントを書いている』と発生するようです。
それなので解決方法としては・・・

  • 1・要素の中にコメントを書く
  • 2・<!––[if !IE]><![endif]––>を使ってコメントを書く
  • 3・コメントを消してしまう

となります。

▼対策1・要素の中にコメントを書く場合

<div id="contents">
	<div class="box">
	<!--▲ボックス1ここから-->
		<p>
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。
		</p>
	<!--▼ボックス1ここまで-->>
	</div>

	<div class="box">
	<!--▲ボックス2ここから-->
		<p>
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。
		</p>
	<!--▼ボックス2ここまで-->
	</div>

	<div class="box">
	<!--▲ボックス3ここから-->
		<p>
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。
		</p>
	<!--▼ボックス3ここまで-->
	</div>
</div>
	

▼対策2・IE条件分岐コメントを使う場合

<div id="contents">
	<!––[if !IE]>▼ボックス1ここから<![endif]––>
	<div class="box">
		<p>
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。
		</p>
	</div>
	<!––[if !IE]>▲ボックス1ここまで<![endif]––>

	<!––[if !IE]>▼ボックス2ここから<![endif]––>
	<div class="box">
		<p>
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。
		</p>
	</div>
	<!––[if !IE]>▲ボックス2ここまで<![endif]––>

	<!––[if !IE]>▼ボックス3ここから<![endif]––>
	<div class="box">
		<p>
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。<br />
			記事の内容をここに書きます。
		</p>
	</div>
	<!––[if !IE]>▲ボックス3ここまで<![endif]––>
</div>
	

原因と解決方法が分かった時のなんとも言えない気持ちは今でも覚えています。
「IE6は、コメントも好きに書かせてくれないのか」と・・・

IEで<li>要素の中のインライン要素をブロックレベル要素に変更したときにでるバグ

<li>要素の中にある<a>要素をブロック要素に変更したい時ってありますよね?
例えば・・・

/* ▼HTML */
<ul id="gNav">
	<li>
		<a href="#" class="nav"> ナビ1 </a>
	</li>

	<li>
		<a href="#" class="nav"> ナビ2 </a>
	</li>

	<li>
		<a href="#" class="nav"> ナビ3 </a>
	</li>
</ul>


/* ▼CSS */
#gNav {
	width: 450px;
	height: 50px;
	float: left;
}

.nav {
	width: 150px;
	height: 50px;
	float: left;
	display: block;
	border: 1px solid #CCC;
}
	

というような場合などです。

FireFoxやChromeなどのブラウザだと問題なく表示してくれるのですが、IE(Internet Explorer)6・7ではきちんと表示してくれません・・・
(※IE8は問題なく表示できます)

▼FireFoxやChromeなど
モダンブラウザの場合

▼IE6やIE7
IEの場合

IEでは、リスト中のインライン要素をブロック化するとバグが発生します・・・
どうも『line-height』がおかしくなってるみたいです・・・

解決方法としては、
<li>タグに『line-height: 0』
<a>タグに『line-height: normal』
を、宣言することで他のブラウザと同じように表示することができます。

/* ▼HTML */
<ul id="gNav">
	<li>
		<a href="#" class="nav"> ナビ1 </a>
	</li>

	<li>
		<a href="#" class="nav"> ナビ2 </a>
	</li>

	<li>
		<a href="#" class="nav"> ナビ3 </a>
	</li>
</ul>


/* ▼CSS */
#gNav {
	width: 450px;
	height: 50px;
	float: left;
}

#gNav li{
	line-height: 0;
}

.nav {
	width: 150px;
	height: 50px;
	float: left;
	display: block;
	border: 1px solid #CCC;
	line-height: normal;
}
	

IEのバグは、精神的にきつい時がありますよね。
IE6のバグ対応はいつまで続くのかな・・・