ページ内分割をするナビゲーションのクリックエリア？IEバグ対応

Category
： CSS リファレンス

ページ内分割する上記みたいなナビゲーションってブログを見ているとよく見かけると思うんですが、このナビゲーションのクリックエリアみたいなのが、IEではおかしくなってしまってる人って自分がみる限りでは殆どです。

見た目やCSS、実際にマウスが反応するエリアは一切おかしくはないのですが、実際にクリックしてみるとFirefoxやSafariでは、正しく表示されるのがIE7、IE6（6以下は知りません）では変な表示になってしまうんです...

どのように変なのか実際に検証

サンプルも作ったので、実際にサンプル+画像を見て下さい

FirefoxやSafariで見てみる

画像の赤枠で囲ってる中に点線で表示されている用に、実際の正しいクリックエリアが反応してくれます。

サンプルページ

IE6やIE7で見てみる

クリックエリアやマウスが反応するエリアは正しいのですが、クリックした後の点線が変な場所に出てしまうんです...

サンプルページ

サンプルのHTML、CSSソース

<ul class="pageNext1">
<li><span>1</span></li>
<li><a href="#header">2</a></li>
<li><a href="#header">3</a></li>
<li><a href="#header">4</a></li>
<li><a href="#header">5</a></li>
<li><a href="#header">Next</a></li>
</ul>

ul.pageNext1 {
	padding: 1em 0;
}

ul.pageNext1 li {
	display: inline;
	margin-right: 5px;
}
ul.pageNext1 li span,
ul.pageNext1 li a {
	padding: .3em 1em;
	background: #222;
	border: 1px solid #000;
	text-decoration: none;
	color: #FFF;
}
ul.pageNext1 li span	{
	background: #FFF;
	color: #000;
	font-weight: bold;
}
ul.pageNext1 li a:hover {
	background: #EEE;
	color: #222;
}

バグ解消をしたソース。サンプル

バグ解消をしたサンプル

<ul class="pageNext">
<li><span>1</span></li>
<li><a href="#header">2</a></li>
<li><a href="#header">3</a></li>
<li><a href="#header">4</a></li>
<li><a href="#header">5</a></li>
<li><a href="#header">Next</a></li>
</ul>

class名変更しただけ。

ul.pageNext	{
	padding: 1em 0;	
}
ul.pageNext li	{
	display: inline;
	margin-right: 5px;
}
ul.pageNext span,
ul.pageNext a	{
	display: inline-block;
	background: #222;
	padding: .1em 1em;
	border: 1px solid #000;
	color: #FFF;
	text-decoration: none;
}
ul.pageNext li span	{
	background: #FFF;
	color: #000;
	font-weight: bold;
}
ul.pageNext a:hover	{
	background: #EEE;
	color: #222;
}

class名を合わせた事と、インライン要素にdisplay: inline-block;を使った点。
後はpadding領域の少し変更。

それ以外は一切変更していないですよ。

気にならない人にとってはたいした問題ではないのですが、実際気になってなおせない！！！って方は是非是非使ってみて下さい。

(2008/09/ 2 17:46 PM)