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

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

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

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

…ここからが続き

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

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

FirefoxやSafariで見てみる

FirefoxやSafariで見てみる

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

IE6やIE7で見てみる

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領域の少し変更。

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

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

Comments

haru

haru

できました。^^;
間違っていました。すみませんm(__)m
早速サイトに使わせていただきました。
ありがとうございます。

2009年06月07日 13:30

MIYA

MIYA

指定してある class 名と HTML に指定してある class 名は同じになってますか?
自分の方で再度見てみた所問題なかったので、そこが怪しいと思われます。

このサンプルは画像を使っていないのでコピペだけでいけますよ。

2009年06月07日 12:25

haru

haru

こんにちわ^^

CSSをコピーしてページにHTMLソースを
書き込んだんでみたんですけど・・数字しか
ページに表示されません。

CSSの背景が消えています。
コピーペーストだけでは、いけませんか?

2009年06月07日 09:40

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article