130単位

IE6でテキストが二重表示されるバグ

学習, XHTML/CSS

2カラムレイアウトのWebサイトを制作していて、おかしな現象に遭遇しました。IE6でのみ、ある部分のテキストが二重に表示されてしまうのです。

#container {
	width: 780px;
}
.leftarea {
	width: 200px;
	float: left;
}
.rightarea {
	width: 560px;
	float: left;
	margin: 0px 0px 0px 20px;
}

こんなcssで、rightarea内のテキストが leftareaの下あたりに重複して出現していました。

解決法1

IE6で、文字(画像)が複製されてズレる - Archiva
http://archiva.jp/web/html-css/Duplicate_Characters_Bug.html

調べていて見つけたこちらの記事に、画像付きの解説が載っていました。最後のfloat要素の右マージンに-3pxを指定すると良いらしいです。

.rightarea {
	width: 560px;
	float: left;
	margin: 0px -3px 0px 20px;
}

これで直りました。ちなみに「-2px」でもいけて、「-1px」ではダメでした。rightarea内の要素で左右ボーダーを1pxずつ取っているのですが、それと関連しているのかもしれません。

解決法2

.rightarea {
	width: 560px;
	float: right;
	margin: 0px 0px 0px auto;
}

これでもいけました。フロートの向きを逆(右)にして、左マージンにautoを指定しています。ただし2カラムのときしか使えなさそうな気がするので、あまりおすすめしません。

ほか参考リンク

以下によれば、htmlのコメントを消すことで解決する場合もあるみたいです。(自分の場合はもともとコメント自体ありませんでした)

はねつき » IE６で勝手にコンテンツ内容が複製されるバグ
http://hane.itigo.jp/archives/60

ツイートする

Permalink | コメント(0) | トラックバック(0)